HTML+CSS 网页排版笔记

网页排版首次练习，记录学习的点点滴滴
主要使用了浮动，盒子模型，无序列表来实现对网页的排版
网页排版的方式：1.使用浮动来进行网页排版 2.使用表格来进行网页排版 3.使用定位来进行网页排版使用浮动来进行网页排版是最常用的
盒子模型：内容区，内边距，边框，外边距
清除自带样式：margin:0px; padding:0px;
内联元素改成块元素：display:block; 行内块元素：display:inline-block;
居中：margin:0px auto;
清除超链接下划线：text-decoration:none;
清除无序列表前面的点：lift-style:none;
控制鼠标滑动的伪类：link，hover，active
行高line-height 字间距letter-spacing 单词间距word-spacing

下面是做简单网页排版时的联系代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}.first{height:60px;width: 1000px;background-color: black;}.second{height: 500px;width: 1000px;background-color: yellowgreen;}.third{height: 20px;width: 1000px;background-color: black;}h1{color: white;margin-left:20px;}.L{height: 240px;width: 150px ;margin-left: 5px;float: left;}.second a{display: block;height: 25px;width: 180px;list-style: none;text-decoration: none;color: black;margin:0px 5px 5px 5px;padding-left:5px ;background-color: blue;}.up{height:240px;width: 800px;background-color: orange;float: right;}.picture1{height: 230px;width: 490px;background-color:pink;float: left;margin: 5px;}.decoration1{height: 230px;width: 290px;background-color: skyblue;float: right;margin: 5px;}h3{padding-top: 10px;padding-bottom: 20px;}.span1{font-size: 11px;}.down{height:240px;width: 800px;background-color: orange;float: right;margin-top: 10px;}.L1{height: 230px;width: 390px;background-color:pink;float: left;margin: 5px;}.R1{height: 230px;width: 390px;background-color: skyblue;float: right;margin: 5px;}.picture2{height: 100px;width: 150px;background-color:yellow;float: left;}.decoration2{height: 100px;width: 230px;background-color:cyan;float: right;}.decoration3{height: 100px;width: 230px;background-color:cyan;float: right;}.picture3{height: 100px;width: 150px;background-color:yellow;float: left;}.classA{display: block;width: 150px;color: white;font-family: "微软雅黑";margin:0px auto;}</style></head><body><div class="first"><h1>The London News</h1></div><div class="second"><div class="L"><ul><li><a href="#">Local News</a></li><li><a href="#">National News</a></li><li><a href="#">World News</a></li><li><a href="#">Politics News</a></li><li><a href="#">Science News</a></li><li><a href="#">Technology News</a></li><li><a href="#">Travel News</a></li><li><a href="#">Business News</a></li><li><a href="#">Education News</a></li><li><a href="#">Entertainment News</a></li></ul></div><div class="r"><div class="up"><div class="picture1"></div><div class="decoration1"><h3>The Big Freeze</h3><span class="span1">The Land Before Time VIII: The Big Freeze is a 2001 direct-to-video animated adventure musical film and the eighth film in The Land Before Time series. <br />In September 2001, the film was nominated by the Video Premieres Academy for two awards: "Best Animated Video Premiere Movie" and "Best Animated Character Performance" (Mr. Thicknose).</span></div></div><div class="down"><div class="L1"><div class="picture2"></div><div class="decoration2"><h3>Farms Cleared</h3><span class="span2"></span></div></div><div class="R1"><div class="picture3"></div><div class="decoration3"><h3>Interest Rate Rises</h3><span class="span3"></span></div></div></div></div></div><div class="third"><span class="classA">fixed width page design</span></div></body>
</html>

HTML+CSS 网页排版笔记相关推荐

css网页布局中文字排版的属性和用法
前段时间,学习了几个大的网站的图文混排的方法.今天总结下, css网页布局中文字排版的相关属性以及用法 .包括:设定字体.颜色.大小.段落空白,首字下沉.首行缩进.中文字的截断.固定宽度词内折行(wo ...
java 网页排版乱_HTML、DIV+CSS网页制作中排版混乱的几种常见的情况
对于Web前端初学者或者经验不够丰富的人来说,出现页面排版布局混乱的情况并不罕见,有时候明明前面部分的网页都很整齐美观,可是在接下来的部分中经常会出现网页布局混乱,比如content无法调整到开发者需 ...
html中如何写新闻题目,用DIV+CSS实现网页排版中新闻列表的制作
css代码: .list{ margin: 0px 10px 20px; text-align: left; } .list ul{ list-style-type: none; margin: 0p ...
《精通CSS》第4章网页排版
<精通 CSS>往期陪读章节: 第 1 章基础知识第 2 章添加样式第 3 章可见格式化模型或许大家会觉得排版都是设计师的工作,前端开发按照已经排版好的设计稿复原就行.当然,这 ...
前端学习笔记之CSS网页布局
CSS网页布局阅读目录一网页布局方式二标准流三浮动流四定位流一网页布局方式 #1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如wor ...
《CSS揭秘》笔记（一）
前言我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...
CSS基础班笔记(二)
web前端剑法之css ??web前端剑法之css 地址 ??CSS基础班笔记(一) https://blog.csdn.net/Augenstern_QXL/article/details/1155 ...
CSS 学习成长笔记（3）
CSS Note_3 一.CSS 盒子模型 1. CSS 三大特性 2. CSS 特性之优先级(详细) 3. 盒子模型二.CSS 浮动 1. 结构伪类选择器 2. 伪元素 3. 标准流 4. 浮 ...
CSS选择器速记笔记
去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记. 这几天拿出来看了一下,发现很多都忘记了.所以,我决定把它们贴在这里,方便以后查看.这对其他朋友应该也是有用的,毕竟选择器是制 ...
CSS入门学习笔记（案例+详解）
CSS入门学习笔记一.CSS简介 1.什么是CSS? 2.为什么使用CSS? 3.CSS的作用二.CSS语法 1.CSS基础语法 2.CSS注释语法 3.CSS应用方法三.CSS选择器 1.元素 ...

HTML+CSS 网页排版笔记

HTML+CSS 网页排版笔记相关推荐

最新文章

热门文章

HTML+CSS 网页排版 笔记

HTML+CSS 网页排版 笔记相关推荐

最新文章

热门文章

HTML+CSS 网页排版笔记

HTML+CSS 网页排版笔记相关推荐