两个HTML，CSS布局实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head> <body>
<div id="head">
<div id="logo">
<img src="img/logo1.png" width="200px" height="100px" />
</div>
<div>
<div class="menu1">联系我们</div></a>
<div class="menu1">关于我们</div>
<div class="menu1">新闻动态</div>
<div class="menu1">产品展示</div>
<div class="menu1 menu_z">首页</div>
</div>
</div>
<hr color="#f2e5ba" size="1" />
<div id="tu">
<div>
<img src="img/20170516114133939.jpg" width="1200px" height="642px" />
</div>
<div id="zuo"></div>
<div id="you"></div>
</div>
<div id="title">公司产品推荐</div>
<div id="nr">
<div class="nr_li">
<div >
<img src="img/20170518071914505.jpg" height="180px" width="280px" />
</div>
<div class="nr_1">
明星产品推荐
</div>
<div class="nr_2">
明星产品推荐
</div>
</div>
<div class="nr_li">
<div >
<img src="img/20170518071914505.jpg" height="180px" width="280px" />
</div>
<div class="nr_1">
明星产品推荐
</div>
<div class="nr_2">
明星产品推荐
</div>
</div>
<div class="nr_li">
<div >
<img src="img/20170518071914505.jpg" height="180px" width="280px" />
</div>
<div class="nr_1">
明星产品推荐
</div>
<div class="nr_2">
明星产品推荐
</div>
</div>
<div class="nr_li">
<div >
<img src="img/20170518071914505.jpg" height="180px" width="280px" />
</div>
<div class="nr_1">
明星产品推荐
</div>
<div class="nr_2">
明星产品推荐
</div>
</div>
</div>
<div style="clear:both"></div>
<div id="qt">
<div class="qtli">
<div class="qttitle">
<div class="qt_zuo">
产品展示：
</div>
<div class="qt_you">
更多>>
</div>
</div>
<div>
<img src="img/20170516071750947.jpg" width="280px" height="269px" />
</div>
<div class="qt_nr">
臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。
</div>
</div>
<div class="qtli">
<div class="qttitle">
<div class="qt_zuo">
产品展示：
</div>
<div class="qt_you">
更多>>
</div>
</div>
<div>
<img src="img/20170516071750947.jpg" width="280px" height="269px" />
</div>
<div class="qt_nr">
臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。
</div>
</div>
<div class="qtli">
<div class="qttitle">
<div class="qt_zuo">
产品展示：
</div>
<div class="qt_you">
更多>>
</div>
</div>
<div>
<img src="img/20170516071750947.jpg" width="280px" height="269px" />
</div>
<div class="qt_nr">
臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。
</div>
</div>
<div class="qtli">
<div class="qttitle">
<div class="qt_zuo">
产品展示：
</div>
<div class="qt_you">
更多>>
</div>
</div>
<div>
<img src="img/20170516071750947.jpg" width="280px" height="269px" />
</div>
<div class="qt_nr">
臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。
</div>
</div>
</div>
<div id="yejiao">
<div id="yejiao1">
Copyright © 2017-2018 臻体纤美 版权所有 天启网络技术支持
</div>
<div id="yejiao2">
电话：0635-8240686 邮箱：ztqm001@163.com 地址：聊城市东昌府区市政大楼有
</div> </div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
*{
margin:0px auto;
padding:0px;
font-family:微软雅黑;}
#head{
width:1200px;
height:118px;}
#logo{
width:200px;
height:100px;
float:left;}
#menu{
width:;
height:118px;
float:left;}
.menu1{
width:80px;
height:80px;
background-image:url(img/li_bg.png);
float:right;
text-align:center;
line-height:80px;
vertical-align:middle;
font-size:13px;
color:#b08f23;
margin-top:38px;
}
.menu1:hover{
color:white;
background-image:url(img/li_bg_h.png);
cursor:pointer;
}
.menu_z{
color:white;
background-image:url(img/li_bg_h.png);
}
#tu{
width:1200px;
height:642px;
margin-top:10px;}
#zuo{
width:44px;
height:44px;
background-image:url(img/jiantou.png);
position:relative;
top:-343px;
left:-560px;
cursor:pointer;
}
#you{
width:44px;
height:44px;
background-image:url(img/jiantou.png);
position:relative;
background-position:right;
top:-387px;
right:-560px;
cursor:pointer;
}
#title{
width:1200px;
height:50px;
margin:30px 0px 20px 0px;
text-align:center;
line-height:50px;
vertical-align:middle;
font-size:22px;
color:#1E90FF;
font-weight:bold;
}
#nr{
width:1200px;
height:302px;
}
.nr_li{
width:280px;
height:300px;
border:1px solid #f2e5ba;
float:left;
margin:0px 9px 0px 9px;
}
.nr_img{
width:280px;
height:180px;
}
.nr_1{
width:270px;
height:30px;
padding:5px;
font-weight:bold;
line-height:30px;
vertical-align:middle;
}
.nr_2{
width:270px;
height:60px;
padding:5px;
font-size:13px;
overflow:hidden;
}
#qt{
width:1200px;
height:406px;
margin-top:20px;
margin-bottom:20px;
}
.qtli{
width:280px;
height:406px;
border:1px solid #f2e5ba;
margin:0px 9px 0px 9px;
float:left;
}
.qttitle{
width:280px;
height:45px;
background-color:#b08f23;
}
.qt_zuo{
float:left;
height:45px;
margin-left:10px;
line-height:45px;
vertical-align:middle;
font-size:15px;
font-weight:bold;
color:white;
}
.qt_you{
float:right;
height:45px;
margin-right:10px;
line-height:45px;
vertical-align:middle;
font-size:14px;
}
.qt{
width:280px;
height:269px;}
.qt_nr{
width:260px;
height:72px;
padding:10px;
overflow:hidden;
font-size:13px;
text-indent:20px;
color:#7b7b7b;
}
#yejiao{
width:1200px;
height:120px;
}
#yejiao1{
width:1200px;
height:35px;
margin-top:30px;
text-align:center;
line-height:35px;
vertical-align:middle;
font-size:13px;
color:#898989;
}
#yejiao2{
width:1200px;
height:35px;
text-align:center;
line-height:35px;
vertical-align:middle;
font-size:13px;
color:#898989;
}
然后，跟着感觉制做一个简单的个人主页：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人主页</title> <link href="index.css" rel="stylesheet" type="text/css" />
</head> <body>
<div id="head1">
<div id="head_logo">
<img src="img/logo.jpg" width="100px" height="100px"/>
</div>
<div>
<div class="menu">展望未来</div>
<div class="menu">发展历程</div>
<div class="menu">知识学习</div>
<div class="menu">历史</div>
<div class="menu menu1">首页</div>
</div>
</div>
<hr color="#FC8727" 4px/>
<div style="clear:both"></div>
<div>
<div id="font">
<a href="#">谁将新樽辞旧月，今月曾经照古人。</a>
</div>
<div id="zuo"></div>
<div id="you"></div>
</div>
<div>
<div id="nr">主要内容</div>
</div>
<div class="nr1">
<div class="nr2">
<img src="img/-1f2b25f522133839.jpg" width="230"/>
<div class="nr_title">我的导师</div>
<div class="nr_n">我的大学生活</div>
</div>
<div class="nr2">
<img src="img/-1f2b25f522133839.jpg" width="230"/>
<div class="nr_title">我的导师</div>
<div class="nr_n">我的大学生活</div>
</div>
<div class="nr2">
<img src="img/-1f2b25f522133839.jpg" width="230"/>
<div class="nr_title">我的导师</div>
<div class="nr_n">我的大学生活</div>
</div>
<div class="nr2">
<img src="img/-1f2b25f522133839.jpg" width="230"/>
<div class="nr_title">我的导师</div>
<div class="nr_n">我的大学生活</div>
</div>
</div>
<div class="nr1">
<div class="nr3">
<div class="nr_title nr4">我的技能</div>
<div class="nr5"><a href="#">更多>></a></div>
<div style="clear:both"></div>
<p>天行健，君子以自强不息。</p>
</div>
<div class="nr3">
<div class="nr_title nr4">我的技能</div>
<div class="nr5"><a href="#">更多>></a></div>
<div style="clear:both"></div>
<p>天行健，君子以自强不息。</p>
</div>
<div class="nr3">
<div class="nr_title nr4">我的技能</div>
<div class="nr5"><a href="#">更多>></a></div>
<div style="clear:both"></div>
<p>天行健，君子以自强不息。</p>
</div>
<div class="nr3">
<div class="nr_title nr4">我的技能</div>
<div class="nr5"><a href="#">更多>></a></div>
<div style="clear:both"></div>
<p>天行健，君子以自强不息。</p>
</div>
</div>
<div style="clear:both"></div>
<hr color="#FC8727" 4px/>
<div id="yejiao">
copyright © wode网 1994-长生不死，All RightsReserved | </div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
*{
margin:0px auto;
font-family:华文彩云,隶书;}
#head1{
margn-top:10px;
height:200px;
width:1000px;
background-image:url(img/t2.jpg);
background-repeat:round;
}
#head_logo{
margin:60px 20px 20px 20px;
height:100px;
width:100px;
float:left;
border-radius:5px;
}
.menu{
height:60px;
width:80px;
font-size:14px;
text-align:center;
line-height:80px;
vertical-align:middle;
float:right;
margin:80px 20px 20px 20px;
background-image:url(img/beijing3.jpg);
border-radius:15px;
position:relative;
top:20px;
}
.menu:hover{
opacity:0.9;
background-image:url(img/beijing4.jpg);
border-radius:15px;
box-shadow:10px 10px 10px #CF0;
cursor:pointer;
}
.menu1{
opacity:0.9;
background-image:url(img/beijing4.jpg);
border-radius:15px;
box-shadow:10px 10px 10px #CF0;
}
#font{
margin-top:10px;
height:500px;
width:1000px;
text-align:center;
line-height:500px;
background-image:url(img/t3.jpg);
font-family:隶书;
font-size:36px;
color:#900;
background-repeat:round;
}
#zuo{
width:44px;
height:44px;
background-image:url(img/jiantou.png);
position:relative;
top:-250px;
left:-410px;
cursor:pointer;
}
#you{
width:44px;
height:44px;
background-image:url(img/jiantou.png);
position:relative;
background-position:right;
top:-294px;
right:-410px;
cursor:pointer;
}
#jiantou1{
height:0px;
width:0px;
border-top:10px solid #FFF;
border-bottom:10px solid #000;
border-right:10px solid #FFF;
border-left:10px solid #FFF;}
#nr{
margin:0px 0px 0px 0px;
height:50px;
width:100%;
line-height:50px;
font-family:微软雅黑;
font-size:26px;
text-align:center;
vertical-align:middle;
font-weight:bold;
position:relative;
top:-50px;}
.nr1{
width:1000px;
height:300px;}
.nr2{
margin:10px;
width:228px;
height:300px;
float:left;
border:1px solid #9C3;
background-image:url(img/beijing3.jpg);
}
.nr_title{
font-family:隶书;
font-size:17px;
text-align:center;
}
.nr_n{
font-family:宋体;
font-size:13px;
text-indent:2.5em;
}
.nr3{
margin:10px;
width:228px;
height:300px;
float:left;
border:1px solid #9C3;
background-image:url(img/beijing2.jpg);
}
.nr4{
float:left;}
.nr5{
float:right;
font-family:微软雅黑;}
p{
font-family:宋体;
margin-top:10px;
font-size:12px;
text-indent:2em;
overflow:hidden;}
#yejiao{
float:left;
font-family:微软雅黑;
margin-left:400px;
margin-top:30px;
font-size:12px;
color:#999;
}
需要注意的知识点：
制作一个网页，首先要考虑网页的宽度，对于初学者，最好开始就将网页的宽度定好。
*{}：
样式表先设置好通用样式，比如margin：0px auto；居中，padding：0px，去掉多余的内边距，大部分字体样式，等。
看好网页大致分为几块，然后开始从头设置。
在流式布局中，在前面的元素先走，所以如果设置向右流，代码中的顺序应该反过来写。
在font-famliy中可以设置多个字体，如果浏览器不识别第一个则会自动识别下一个。
如果设置的正常字体在浏览器中显示不正确，应查看编码格式。
HTML和css使用的注释不同，在HTML代码中使用<!-- -->，但是在css中该注释无效，应使用/* */。
：hover鼠标移上的效果，基本设置和普通样式一样，有几个需要注意
cursor:pointer; 鼠标的光标变成手
border-radius:5px;圆角，像素的多少代表圆角的弧度
box-shadow:0 0 5px white; 阴影效果，每个方向阴影的大小以及颜色
display:none隐藏 block显示 隐藏不占位置
visibility:hidden 隐藏 visible 显示 隐藏占位置
overflow:hidden; 超出部分隐藏
需要注意的是，<sapn>标签的大小是由内容决定的，单独设置标签的大小没有意义，但是，如果给它display:block使它块状显示，就可以，会达到和<div>相似的效果。
透明效果：
opacity:0.2;
-moz-opacity:0.2;
filter:alpha(opacity=20);
这三种方式均可达到透明效果，是不同CSS标准的写法，由于有些不同浏览器支持不同的标准，所以最好全部写上。
在网页中，常用特殊字符有的有：
下面是大多数特殊字符一览表：
|
|
|||||||||
| ´ | ´ | © | © | > | > | µ | µ | ® | ® |
| & | & | ° | ° | ¡ | ¡ | | » | » | |
| ¦ | ¦ | ÷ | ÷ | ¿ | ¿ | ¬ | ¬ | § | § |
| • | • | ½ | ½ | « | « | ¶ | ¶ | ¨ | ¨ |
| ¸ | ¸ | ¼ | ¼ | < | < | ± | ± | × | × |
| ¢ | ¢ | ¾ | ¾ | ¯ | ¯ | “ | " | ™ | ™ |
|
|
|||||||||
| € | € | £ | £ | ¥ | ¥ | ||||
|
|
|||||||||
| „ | „ | … | … | · | · | › | › | ª | ª |
| ˆ | ˆ | “ | “ | — | — | ’ | ’ | º | º |
| † | † | ‹ | ‹ | – | – | ‚ | ‚ | ” | ” |
| ‡ | ‡ | ‘ | ‘ | ‰ | ‰ | ­ | ˜ | ˜ | |
|
|
|||||||||
| ≈ | ≈ | ⁄ | ⁄ | ← | ← | ∂ | ∂ | ♠ | ♠ |
| ∩ | ∩ | ≥ | ≥ | ≤ | ≤ | ″ | ″ | ∑ | ∑ |
| ♣ | ♣ | ↔ | ↔ | ◊ | ◊ | ′ | ′ | ↑ | ↑ |
| ↓ | ↓ | ♥ | ♥ | − | − | ∏ | ∏ | | ‍ |
| ♦ | ♦ | ∞ | ∞ | ≠ | ≠ | √ | √ | | ‌ |
| ≡ | ≡ | ∫ | ∫ | ‾ | ‾ | → | → | ||
|
|
|||||||||
| α | α | η | η | μ | μ | π | π | θ | θ |
| β | β | γ | γ | ν | ν | ψ | ψ | υ | υ |
| χ | χ | ι | ι | ω | ω | ρ | ρ | ξ | ξ |
| δ | δ | κ | κ | ο | ο | σ | σ | ζ | ζ |
| ε | ε | λ | λ | φ | φ | τ | τ | ||
|
|
|||||||||
| Α | Α | Η | Η | Μ | Μ | Π | Π | Θ | Θ |
| Β | Β | Γ | Γ | Ν | Ν | Ψ | Ψ | Υ | Υ |
| Χ | Χ | Ι | Ι | Ω | Ω | Ρ | Ρ | Ξ | Ξ |
| Δ | Δ | Κ | Κ | Ο | Ο | Σ | Σ | Ζ | Ζ |
| Ε | Ε | Λ | Λ | Φ | Φ | Τ | Τ | ς | ς |
两个HTML，CSS布局实例的更多相关文章
- CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- CSS 布局实例系列（四）如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化？
Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕 ...
- CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化 个人总结出如下三种实现思路: 通过绝对定位实现 S ...
- CSS 布局实例系列（一）总结CSS居中的多种方法
使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧. 1. 首先来聊聊水平居中: text-align 与 inline-block 的配合 就像这样 ...
- [div+css]网站布局实例二
重点: 合理应用"xhtml标签"建立良好的页面结构 拿到一份"设计方案"的效果图后不要立即开始编码,而是要 首先理清"各元素之间的关系"; ...
- PHP.5-DIV+CSS布局网站首页实例
DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...
- DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘
网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...
- css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
随机推荐
- 使用Perl提取Excel中的IO_MUX
使用Perl提取Excel中的IO_MUX 关键问题 提取数据 格式化输出 循环嵌套 数据结构构建 坐标映射,逆向提取关键字 描述 在IC集成中,我们使用Excel表格规划设计的IC引脚功能映射需要转 ...
- python自动化测试应用-第6篇（WEB测试）--Selenium元素篇
篇6 python自动化测试应用-Selenium基础篇 --lamecho 1.1概要 大家好!我是lamecho(辣么丑),上一篇我们搭建好p ...
- sass入门学习篇（一）
先简单的介绍一下sass,如果你了解less,sass就没什么太大问题 Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并 ...
- Python 面向对象之一
Python 面向对象之 类与属性 今天接触了一下面向对象,发现面向对象和之前理解的简直就是天壤之别,在学Linux的时候,一切皆文件,现在学面向对象了,so,一切皆对象. 之前不是一直在学的用面向函 ...
- ms_celeb_1m数据提取（MsCelebV1-Faces-Aligned.tsv）python脚本
本文主要介绍了如何对MsCelebV1-Faces-Aligned.tsv文件进行提取 原创by南山南北秋悲 欢迎引用!请注明原地址 http://www.cnblogs.com/hwd9654/p/ ...
- 图像转置的SSE优化（支持8位、24位、32位），提速4-6倍。
一.前言 转置操作在很多算法上都有着广泛的应用,在数学上矩阵转置更有着特殊的意义.而在图像处理上,如果说图像数据本身的转置,除了显示外,本身并无特殊含义,但是在某些情况下,确能有效的提高算法效率,比如 ...
- java:Comparator比较器
/*Comparator是java.util包里的一个接口,使用时应该实现导入相应的包, *再写一个实现了Comparator接口的类,并复写int compare(Object o)方法, *写出你 ...
- 产品经理学Python：条件控制
条件控制其实就是if...else...(如果...条件是成立的,就做...:反之,就做...)的使用,其基本结构是: 具体看下面这个例子: def account_login(): # 定义函数 p ...
- 小米红米1 android 4.4.4上操作数据库异常问题
产生的问题: 小米红米1 android 4.4.4上,按HOME键,应用进入后台,再启动,应用进程直接挂掉 解决的方法: 这个是操作数据库,数据库关闭之后导致的异常,解决的方法: //4.0以上的版 ...
- git pull冲突：commit your changes or stash them before you can merge.
今天用git pull来更新代码,遇到了下面的问题: error: Your local changes to the following files would be overwritten by ...