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）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
随机推荐
- sql 2008 修改链接服务器 Rpc &Rpc Out
From: http://blog.csdn.net/gnolhh168/article/details/41725873 USE [master] GO EXEC master.dbo.sp_ser ...
- 【转】关于Jquery中ajax方法data参数用法的总结
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Bosto ...
- C++ 之 auto_ptr and shared_ptr
1.auto_ptr 这个所谓的只能指针有点鸡肋! 没有引用计数,而且还有一个所有权转移的情况! 当所有权转移后,以前的auto_ptr将会成为null 2.shared_ptr 增加了引用计数,没 ...
- ERROR 1872 (HY000): Slave failed to initialize relay log info structure from the repository
salve复制线程停止,尝试start slave 时报ERROR 1872错误mysql> system perror 1872 MySQL error code 1872 (ER_SLAVE ...
- web浏览器兼容简要整理
ajax的创建 if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else { //IE6及其以下版本浏览器 var xhr ...
- maven的使用体验
由于之前是从C++代码阵营中转到java阵营的(这里可能还会转到scala阵营中).在写工程代码的时候,如果是只是简单的创建java project的话,当然也是可以的.但是,随着项目慢慢扩大,组件越 ...
- PHP初学者都该掌握哪些技能
初学PHP时,不要好高骛远,脚踏实地的把LNMP搞熟练,打好基础再往更高的层次发展.今天给大家总结初学者应该学会的技能. 1.Linux 基本命令.操作.启动.基本服务配置(包括rpm安装文件,各种服 ...
- MFC中使用FLASH
一.准备工作 第一步:下载并安装Adobe Flash Player. 从官方网站(http://get.adobe.com/cn/flashplayer/)上下载最新的Flash Player(大约 ...
- 安装R语言扩展包diveRsity-1
今天去了学院的运动会呢-扮熊本熊超开心-写完这篇我补上我的图么么哒 ××××××××××××文末高能预警!!!!!这个包的安装并不是本周的任务!!!!!我真是萌萌哒×××××××××××××× ××× ...
- unix basic command
1. get start Command Example Description ls ls ls -a ls -l 输出目录文件 输出文件包括隐藏文件 输出文件详细信息 pwd pwd show p ...