单纯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决定了我们的大体设计结构，再细化具体内部模块，再添加合适的内容。

CSS应用心得的更多相关文章

CSS使用心得小结
CSS心得最近对CSS的使用有一些小心得,在此写下来给大家分享分享 .最后附上选择器的实例代码. ------DanlV CSS是什么层叠样式表(英文全称:Cascading Style Shee ...
CSS学习心得2
CSS样式链接 a:link - 普通的.未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻当为链接的不同 ...
CSS学习心得
CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外 ...
分享一下学习css,js心得
简化代码,使页面简洁! web前端开发——将界面更好呈现给用户! 要了解在不同浏览器上的兼容情况.渲染原理和存在的bug! 网站性能优化.SEO: 代码的可维护性.性能: 网站重构的本质:建立一个前端 ...
Html&CSS 今日心得
今天和秋秋一起review了一下我自己写的登录页面.她给我提了几个point,对我很有启发. css样式的代码和html代码分离. 我自己做的时候是在google console里面调好了样式以后就直 ...
css 开发心得
1.一个 div内的行内元素如何水平对齐将内部的元素设为 float ,然后设置 margin-top 对齐,然后用伪类清楚浮动的影响
HTML+CSS编写规范
在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...
<c ss高效开发实战>看完了，Bootstrap学习是关键
Bootstrap果真给我们带来了很多便利,学习CSS,必须要掌握很多框架和快速学习的方法. 这本书看完了,也写过几篇读书笔记,墙裂推荐.不上书封面了,只上书的导图. 这里说几点学习CSS的心得 1. ...
Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

随机推荐

CentOS 6.6编译安装Nginx1.6.2+MySQL5.6.21+PHP5.6.3
http://www.osyunwei.com/archives/8867.html 一.配置防火墙,开启80端口.3306端口 vi /etc/sysconfig/iptables #编辑防火墙配置 ...
MyBatis3学习--来源自用户指南
MyBatis是什么? MyBatis 是一款一流的支持自定义SQL.存储过程和高级映射的持久化框架. MyBatis几乎消除了所有的JDBC 代码,也基本不需要手工去设置参数和获取检索结果. My ...
Djanog结合jquery实现ajax
最近想在使用django的基础上通过jquery实现页面局部刷新的功能,研究了两天,终于是解决了这个问题,下面把方法步骤记录下来,以备以后重用. 在项目中通过两种形式实现了ajax: 第一种方法:we ...
iOS 自动化打包
理想的情况:不打开工程的情况下,直接双击就能打包出一个IPA文件,这样就可以让测试直接使用 itools 进行安装. 分如下两种情况: 1)不依赖cocoapod 管理项目的自动化. 如果没有一个简 ...
Java web 项目的相对路径的使用
在java Web中有些地方读取文件需要相对路径.在Java Web 中如何使用相对路径呢? Java Web 在发布项目的时候. 发布根路径下WEB-INF/classes 默认使用该方法的路径是: ...
Cardinal样条曲线的Javascript实现（理论篇）
首先,要对样条曲线进行插值的原因是:希望通过给定的关键帧点生成一条希望的直线或者曲线. 1.直线插值生成一条直线,给定直线首尾的关键点P0,P1,就能确定这条直线的特性,比如y=kx+b中的斜率k和 ...
Spring事务配置的五种方式（转载）
Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式,一般变化的只是代理机制这部分. DataSo ...
hdu 2074
ps:WA了好多次...因为首先是n=1的情况,其次是中心花色和外花色,中心花色也有可能是最外层花色....很无语. 然后就是格式问题咯. 代码 #include "stdio.h" ...
古典问题rabbit
/**古典问题: * 有一对兔子,从出生后第三个月起每个月都生一对兔子, * 小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死, * 问每个月的兔子总数为多少? * 程序分析:兔子的规律为数列: ...
article和section
article和section都是指页面中的块,但是article更加强调独立性,而section常被用来分块. section使用禁忌: 1.不要把section当作定义样式的容器,因为那是div的 ...

CSS应用心得

单纯Html配合CSS网页

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

CSS应用心得的更多相关文章

随机推荐

热门专题