HTML/CSS自制网页

前言：作为初学者使用HTML/CSS制作的网页、修改了三次页面、终于修改出了自己满意的效果、三次修改前后的页面会分别展示在下方。然后、我使用的工具是HBuilder软件

观看顺序：顺次往下、就是每次修改后的展示效果

第一次页面：使用了表格布局方式（很老旧的布局方式）、并且代码冗余、夹杂着许多未生效的代码

第二次页面：修改为使用DIV标签对表格布局进行了替换、去除了未生效的代码、对可以合并的代码进行了整合

第三次页面：解决了高度塌陷问题、加入了导航条、对整体宽度进行了修改、发现修改宽度后布局起来轻松了一些

CSS文件代码如下：

.Demo001{text-align: center;font-family: "agency fb";color:  #FFFAF0;width: 800px;background:black;margin: 10px auto 10px auto;}.Demo002{text-align: center;width: 800px;list-style: none;overflow: hidden;margin: 0px auto 10px auto;background:  black;}.Demo003{color:black ;letter-spacing: 1px;text-align: center;  width: 800px;margin: 0px auto 10px auto;background:  #FFE4C4;font: 16px/2.5 "agency fb";}.Demo004{color: black;width: 800px;background: #FFE4C4 ;letter-spacing: 1px;text-align: center; margin: 0px auto 10px auto;font: 16px/2.5 "agency fb";}.Demo005{margin: 0 auto 10px auto;width:800px;overflow: hidden;}.Demo006{height:80px;width: 800px;background:  black;}.Demo002 li{float: left;width:25%;} .Demo002 a{padding: 5px 0px;width: 100%;text-align: center;text-decoration: none;display: block;color:  #FFFAF0;font: 19px "agency fb" ;}.Demo002 a:hover{                    background: #c00;}.Demo005 img {width:24.5%;}*{margin: 0;padding:0;}

HTML文件代码如下：

<title>我的KINGS主页</title><link rel="stylesheet" type="text/css" href="css/style.css" /></head>
<body>
<h1 class="Demo001">KINGS</h1>
<ul class="Demo002">   <li><a href="my2.html"  target="_blank">全员介绍</a></li><li><a href="my3.html"  target="_blank">周防尊</a></li><li><a href="my4.html"  target="_blank">主角介绍</a></li><li><a href="my5.html"  target="_blank">视频入口</a></li></ul>
<p class="Demo003">故事《K》  讲述了七个“王”之间的争执与异能者的战斗传奇。</p>
<p class="Demo004">本作以与现实中有微妙差异的现代日本为舞台讲述了昵称为“小白”的少<br />年伊佐那社是引发某起事件的嫌疑人而本人却对此毫无记忆。为了调<br />查事情的真相“赤之王” 周防尊率领吠舞罗“青之王”宗像礼司率领Scepter4<br />都在全力追赶伊佐那社并在追赶的过程中互相冲突。莫狗朗即前色之<br />王三轮一言的弟子从此伊佐名其妙的<u>伊佐那社亡命任无奔逃邂逅了一</u><br />身黑衣的长发少年夜刀神那社的命运之路飞速的向着不可知的方向发展……<br /></p>
<div class="Demo005"><div><img src="   55.jpg" ><img src="封面1.jpg" ><img src="    2.jpg" ><img src="封面2.jpg" >   </div>    <div class="Demo006"></div></div>

HTML/CSS自制网页相关推荐

利用html制作网页的小结,HTML_CSS制作网页的一些经验分享，CSS制作网页总结的一些经验 1: - phpStudy...
CSS制作网页的一些经验分享 CSS制作网页总结的一些经验 1: ID用于标识页面单独元素以及持久行的结构性元素方便JS的调用类用于标识同一页面可重复定义使用的结构性元素 ID与类的命名需与表现形 ...
web课程设计网页规划与设计—— 中西餐美食餐饮网站(10页面) html+css+javascript网页设计实例...
web课程设计网页规划与设计-- 中西餐美食餐饮网站HTML(10页面) html+css+javascript网页设计实例临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HT ...
web课程设计网页规划与设计—— 中西餐美食餐饮网站(10页面) html+css+javascript网页设计实例
web课程设计网页规划与设计-- 中西餐美食餐饮网站HTML(10页面) html+css+javascript网页设计实例临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HT ...
在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
Windows下使用apache模块实现合并多个js、css提高网页加载速度
这篇文章主要介绍了Windows下使用apache模块实现合并多个js.css提高网页加载速度,本文使用的模块是基于mod_concat自己修改的,需要的朋友可以参考下现在的网站表现力越来越丰富,页 ...
CSS/DIV网页设计视频教程目录【转】
CSS/DIV网页设计视频教程目录欢迎您来到前沿视频教室,下面列出的是CSS/DIV网页设计视频教程列表.这组视频教程是配合<精通CSS+DIV网页样式与布局>图书制作的,每一课对应于图 ...
[css] 让网页的字体变得清晰，变细用CSS怎么做？
[css] 让网页的字体变得清晰,变细用CSS怎么做? 全家桶:-webkit-font-smoothing: antialiased -moz-osx-font-smoothing: graysca ...
python博客下载本地文件_解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了...
1.今天网上下载一个博客项目,发现本地访问,js,css加载不了. 我想应该是项目上线的安全措施,但是我想调试项目.找到方法如下在settings.py里面编辑添加 STATICFILES_DIR ...
html css做网页总结,学习CSS制作网页总结的一些经验
学习CSS制作网页总结的一些经验互联网发布时间:2008-10-17 19:28:20 作者:佚名我要评论让你使用DIV CSS排版不是让你用换个标签然后再去按照表格的方式去排版 ...

HTML/CSS自制网页

HTML/CSS自制网页相关推荐

最新文章

热门文章