CSS应用心得

2022-09-18 13:54:28

单纯Html配合CSS网页

下面用程序来实际总结一下

首先，在写程序的应该具有一个良好的编程习惯。

第一：排版，拥有一个良好的排版，有助于我们能够快速的理解以及阅读程序；

第二：注释，就如以下程序，作为一个非本人编写的程序，如果没有有效的注释，那么程序阅读以及修改起来是及其困难的；

第三：模块化，模块化为了让我们程序员自己能够快速的看清结构布局，从而很好的去把握程序的每一步，以免在程序出现问题的时候不便于修改。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>有道云笔记</title>
    <style type="text/css">
        header
        {
            background: #EBF8FC;
            height: 60px;
        }

.logo
        {
            font-size: 24px;
            font-weight: bolder;
            margin: 0;
            padding: 0;
            color: #444445;
        }

.enlogo
        {
            margin: 0;
            padding: 0;
            color: #444445;
        }

.tulogo
        {
            position: relative;
            left: 158px;
            padding-top: 14px;
        }

.logoe
        {
            float: left;
            background-size: 30px;
        }

.logoimage
        {
            float: left;
            margin: 15px 1px;
        }

li
        {
            float: left;
            list-style: none;
            padding: 0px 20px;
            float: left;
            position: relative;
            left: 246px;
            font-size: 20px;
            font-weight: bold;
        }

/*****导航移入效果********/
        li:hover
        {
            background: deepskyblue;
        }

.load
        {
            font-size: 15px;
            position: relative;
            left: 305px;
            font-weight: bold;
        }

.loadlink
        {
            text-decoration: none;
            color: #808080;
        }

.mian
        {
            height: 1300px;
            margin: 0 auto;
            width: 800px;
        }

.centerimg
        {
            position: relative;
            left: 125px;
        }
        .function{
            position: relative;
            left: 140px;
            margin-bottom: 100px;
            border: 2px solid red;
        }

.adimage
        {
            float: left;
            border: 2px solid red;
        }

text
        {
            padding: 0px 50px;
            border: 2px solid red;
        }

.widget
        {
            float: right;
            position: relative;
            right: 288px;
            top: -150px;
        }

.award
        {
            float: right;
            border: 3px solid #E3E3E3;
            position: relative;
            left: 35px;
            bottom: 100px;
        }

.tips
        {
            float: left;
            margin: 13px;
        }

.p
        {
            text-align: center;
        }

.im{
margin-left:15px;
}

.h4
        {
            background: #ECF7FC;
            height: 40px;
        }
        body
        {
            width: 1265px;
            margin: 0 auto;
        }

footer
        {
            background-color: #EBF3F3;
            height: 220px;
            margin-bottom: 10px;
        }

.foot{
            float: left;
            position: relative;
            left: 185px;
            margin: 0px 80px;
            padding: 0;
        }

.foot p
        {
            font-size: 12px;
        }

</style>
</head>

<header>
    <div class="tulogo">
        <div class="logoimage">
            <img src="./img/logo_login%5B1%5D.png" />
        </div>
        <div class="logoe">
            <p class="logo">有道云笔记</p>
            <p class="enlogo">note.youdao.com</p>
        </div>
    </div>
    <div>
        <nav>
            <ul>
                <li class="Home page">首页</li>
                <li>多平台下载</li>
                <li>视频介绍</li>
                <li>开放平台</li>
                <li>官方论坛</li>
            </ul>
        </nav>
    </div>
    <div>
        <p class="load"><a href="#" class="loadlink">登录网页版</a>|<a href="#" class="loadlink">注册</a></p>
    </div>
</header>

<div class="mian">
    <div class="centerimg">
        <img src="./img/hd%5B1%5D.jpg" />
    </div>
    <div class="function">
        <div class="adimage">
            <img src="./img/icon_1%5B1%5D.png" />
        </div>
        <div class="text">
            <h2>随心记录随时同步</h2>
            <p>文字的、手写、录音、拍照多种记录方式</p>
            <p>支持文字任意附件格式，学习、工作、生活尽在掌握</p>
            <p>云同步，一处记录，各终端查看</p>
        </div>

</div>

<div class="function">
        <div class="adimage">
            <img src="./img/icon_2%5B1%5D.png" />
        </div>
        <div class="text">
            <h2>云端备份安全可靠</h2>
            <p>从此不怕意外断电、电脑损坏，资料云端找回</p>
            <p>手机遗失，珍贵照片不丢失、资料加密不外泄</p>
            <p>网易出品，安全稳定</p>
        </div>
    </div>
    <div>
        <div class="adimage">
            <img src="./img/icon_3%5B1%5D.png"/>
        </div>
        <div class="text">
            <h2>为中国用户贴心设计</h2>
            <p>手写体验流畅，笔记完美留存</p>
            <p>微博、QQ账号都可登录</p>
            <p>传邮件、发微博、分享变得很容易</p>
        </div>
    </div>
    <div>
        
        <div class="widget">
            <div class="video">
                <img src="./img/video%5B1%5D.jpg" />
            </div>
            <div class="widget2">
                <img src="./img/widget_slide_8%5B1%5D.jpg" />
            </div>
        </div>

<div class="award">
            <div class="h4"><h4>获奖展示</h4></div>
            <div class="tips">
                <img src="./img/award_2%5B1%5D.png" class="im"/>
                <p class="p">360软件管家</p>
                <p class="p">装机必备</p>
            </div>
            <div class="tips">
                <img src="./img/award_1%5B1%5D.png" class="im"/>
                <p class="p">App Store</p>
                <p class="p">员工最爱</p>
            </div>
            <div class="tips">
                <img src="./img/award_4%5B1%5D.png" class="im"/>
                <p class="p">联通wo+</p>
                <p class="p">创新应用奖</p>
            </div>
        </div>
        
    </div>
</div>

</body>

<footer>
    <div class="foot">
        <p>关于有道</p>
        <p>官方博客</p>
        <p>服务条款</p>
        <p>隐私协议</p>
    </div>
    <div class="foot">
        <p>用户帮助</p>
        <p>空间兑换</p>
        <p>公众平台</p>
        <p>意见反馈</p>
        <p>历史版本</p>
        <p>用户推荐</p>
        <p>帮助</p>
    </div>
    <div class="foot">
        <p>关注我们</p>
        <p>新浪微博</p>
        <p>网易微博</p>
        <p>腾讯微博</p>
        <p>人人网</p>
    </div>
    <div class="foot">
        <p>联系我们</p>
        <p>邮箱：ynotefankiu@163.com</p>
        <p>©2013网易公司</p>
    </div>
</footer>

</html>

仔细来看此段程序，总共分为三大板块——我们的基础构架，header、body、footer决定了我们的大体设计结构，再细化具体内部模块，再添加合适的内容。

码农公寓

单纯Html配合CSS网页

下面用程序来实际总结一下

相关文章