CSS应用心得
单纯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>
<!--/********************************头部分************************************/-->
<body>
<!--/*******************************主体部分***********************************/-->
<!-----------------------------功能介绍区----------------------------->
<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 安装VNC Server
环境 服务器:192.168.10.181 系统:CentOS 6.0 安装过程 1.切换至root用户 2.检测系统是否安装VNC [root@Nginx canyouNgx]# rpm -q vn ...
- Java中获取长度length和size的问题
1.length属性是针对Java中的数组来说的,要求数组的长度可以用其length属性: 2.length()方法是针对字符串来说的,要求一个字符串的长度就要用到它的length()方法: 3.ja ...
- java基础之 GC
Java程序员在编码过程中通常不需要考虑内存问题,JVM经过高度优化的GC机制大部分情况下都能够很好地处理堆(Heap)的清理问题.以至于许多Java程序员认为,我只需要关心何时创建对象,而回收对象, ...
- leetcode 日记 4sum java
整体思路同之前的一样,依然采取降低维度的方式进行 public List<List<Integer>> solution(int nums[], int target) { L ...
- web 乱码摘抄
JavaWeb--中文乱码小结 JavaWeb--中文乱码小结 0.纯粹html乱码: 换个editor吧(有时候notepad都比sublime_text好用),最好是在<head>&l ...
- jQuery专题
jQuery概述 ·为了简化JavaScript的开发,一些JavaScript库诞生了.JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的Web2.0特性的富客户 ...
- Mvc api HelpPage 与注释
一.添加包Microsoft.AspNet.WebApi.HelpPage可以自动给api生成帮助页面,url:/help 二.help加注释: 1. 2. public static class H ...
- RequireJS和seaJS的区别与联系
RequireJS和seaJS的区别与联系联系:都是模块加载器,倡导模块化开发理念,核心价值是让 JavaScript 的模块化开发变得简单自然. RequireJS(除了是 ...
- iOS学习之下拉刷新、上拉加载
http://blog.csdn.net/mx_xuanxiao/article/details/50595370
- entity framework 新手入门篇（3）-entity framework实现orderby，count，groupby，like，in，分页等
前面我们已经学习了entityframework的基本的增删改查,今天,我们将在EF中实现一些更加贴近于实际功能的SQL方法. 承接上面的部分,我们有一个叫做House的数据库,其中包含house表和 ...