两个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布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
随机推荐
- seajs加载jquery提示$ is not a function
jquery1.7以上的都支持模块化加载,只是jquery默认的是支持amd,不支持cmd.所以要用seajs加载jquery,需要稍微改下jquery 把 if (typeof define === ...
- 关于定时发送服务的解决办法(PHP)
一.定时发送任务解析 在进行手机APP或者微信开发的时候,经常会有需要定时推送消息的场景. 定时发送又分为两种: 一种是在开发的时候固定时间,后台管理人员只能选择将要推送的消息: 另一种是后台管理人员 ...
- React-Native 之 redux 与 react-redux
前言 本文 有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我讨论. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关,如文中内 ...
- HTTP笔记
"你知道当我们在网页浏览器(Web browser)的地址栏中输入 URL 时,Web 页面是如何呈现的吗?" HTTP协议 HTTP协议(HyperText Transfer P ...
- SQL Server pivot 行转列遇到的问题
前段时间开发系统时,有个功能是动态加载列,于是就使用了SQL Server自带的PIVOT函数进行行转列,开始用的非常溜,效果非常好.但是提交测试后问题来了,测试添加的列名中包含空格,然后就杯具了,功 ...
- sed命令详解-应用篇
本篇从实用的角度讲解sed,关于sed的详细帮助文档,请参考前篇 http://www.cnblogs.com/the-capricornus/p/5279979.html 本篇用到的选项请参考前篇. ...
- windows下安装Redis并部署成服务
windows下安装Redis并部署成服务 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 一:下载 下载地址: windows版本: http ...
- windows10 配置 华为vpn客户端
2017-05-08 1. 安装客户端软件VPNClient_V100R001C02SPC703.exe 2. 新建vpn 安装完成后,打开客户端连接vpn,发现未启用虚拟网卡(这是因为还需要安装客户 ...
- ORA-22835 缓冲区对于 CLOB 到 CHAR 转换或 BLOB 到 RAW 转换而言太小
在使用Oralce时,直接取出 CLOB 到 CHAR 转换或 BLOB 到 RAW 转换时,会出现ORA-22835的异常,以下是个人的解决方案 create or replace Function ...
- vue视频学习笔记02
video 2 vue制作weibo交互 vue-> 1.0vue-resource ajax php服务器环境(node) this.$http.get()/post()/jsonp() th ...