CSS布局

最新推荐文章于 2022-08-31 23:30:10 发布

code_syntax

最新推荐文章于 2022-08-31 23:30:10 发布

阅读量297

点赞数

分类专栏： HTML+CSS 文章标签： html

本文链接：https://blog.csdn.net/code_syntax/article/details/38427449

版权

HTML+CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS布局1.html

<!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>CSS布局1</title>
<style type="text/css">
<!--
.d1 {
height: 100px;
width: 300px;
border: 2px solid #999;
margin:0 auto;
}
#body {
width: 710px;
border: 2px solid #60F;
height: 150px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.left1 {
float: left;
height: 150px;
width: 20%;
border: 2px dashed #933;
}
.right1 {
height: 150px;
width: 58%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
border: 2px solid #F6C;
float: left;
}
.conter {
height: 150px;
width: 100%;
border: 2px solid #6C3;
padding: 0px;
margin: 0px;
clear: none;
}

.d2 {
height: 100px;
width: 80%;
border: 2px solid #999;
margin:0 auto;
}
#left {
float: left;
height: 150px;
width: 200px;
border: 2px solid #00F;
}
#right {
float: right;
height: 150px;
width: 500px;
border: 2px solid #F00;
}
.right2 {
height: 150px;
width: 21%;
border: 2px solid #63F;
margin-right: 0%;
margin-left: 79%;
display: inherit;
}
-->
</style>
</head>

<body>
<p style="display:inline">我是一个段落</p>
<a href="#" class="d1" style="display:block">我是链接1</a>
<a href="#" >我是链接2</a> <img src="" /> <span class="d2" style="display:block">这是一个范围标签</span>
<hr />固定宽度位置布局
<div id="body">
<div id="left">左边内容区域</div>
<div id="right">右边内容区域</div>
</div>
<hr />自适应宽度流布局
<div class="conter">
<div class="left1">左边内容区域</div>
<div class="right1">中间内容区域</div>
<div class="right2">右边内容区域</div>
</div>
</body>
</html>

css示例.html

<!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>第一个html页面</title>

<style type="text/css">
@import url(main.css);
/* 标签选择器*/

   p:link{ color:blue }
   p:visited { color:#000}
   p:hover{ color:red}
   p:active{ color:green}
/* 类选择器 */
.center {
   text-align:center}
.red{
    color:red;
}
/* ID选择器 */
#banner{
width:468px;
height:60px;
background:#cc0000;
}
/* 通配符选择器 */
*{
margin:0;
padding:0
   }
   /**群组选择器**/
   h1,p,.red,#banner{
    font-size:26px;
   }
   /**派生选择器
   .info { color:green;}**/

   p a{
    font-size:40px;
   }
   /*a { color:red; !important}*/
   a:link{ color:blue }
   a:visited { color:#000}
   a:hover{ color:red}
   a:active{ color:green}
</style>

</head>

<body bgcolor="ffccff">
<p class="info">
<img src="logo.JPG" width="290" height="60" alt="欢迎光临拍拍网" align="bottom" /> 
<a href="#">免费注册</a> | 
<a href="#">关于拍拍</a> | 
<a href="#">拍拍助理</a> | 
联系我们 
</p>
<h1 class="center">导购资讯</h1>
<p style="color:#C90; text-align:right">参加电动达人的宝贝仓库</p>
<p>
       炎炎夏日，冰凉家具两折起<br/>
       周末折扣，品牌三折热卖<br />
</p>
<p class="center">
      <font color="ffa275" size="+6" >手机 - 诺基亚 - MOTO - 索爱</font><br/>
   <font face="新宋体" ccolor="#ff000">腾讯旗下购物网站</font> http://www.paipai.com<br/>
</p>
<p id="banner">
版权信息： Copyright  ©  1998 - 2007  TENCENT  Inc . AllRights Reserved
</p>
<hr size="1" noshade width="400" align="left"/>
游戏专区
<ol type="A">
<li>QQ幻想100点卡只需￥8.8元</li>
<li>江湖热血250点只需￥8.8</li>
<li>问道30元卡只需￥25.0元</li>
<li>跑跑点卡200点只需￥16.8元</li>
</ol>
<hr size="1" noshade width="400" align="left"/>
<pre>
<dt>NOTO E2 音乐手机</dt>
  130W像摄像头 Linxu智能系统
  Intel XScale 处理器
  A2DP蓝牙立体声市场价： 1690
  开学价： 1045
</pre>
</body>
</html>

-------------------

main.css

@charset "utf-8";
/* CSS Document */
p{
color:#0F0;//亮绿色
text-align:center
}

a{
color:red
}

DIV+CSS金典布局.html

#nav {
background-color:#FC0;
padding: 0px;
height: 35px;
width: 90%;
margin:0 auto;
}
#left {
background-color: #69F;
padding: 0px;
float: left;
height: 600px;
width: 25%;
margin-left: 5%;
}
#d1,#d2,#d3,#d4,#d5,#d6 {
background-color: #0CC;
margin: 0px;
padding: 0px;
float: left;
height: 49.5%;
width: 33%;
border: 1px solid #333;
}
#d2,#d4,#d6{
background-color:#36F;
}

#right {
background-color:#C66;
padding: 0px;
float: left;
height: 600px;
width: 65%;
}
#foot {
background-color:#FC0;
padding: 0px;
height: 60px;
width: 90%;
margin:0 auto;
float:left;
margin-left: 5%;
}
-->
</style>
</head>

DIV布局.html

#right {
background-color:#9C6;
width: 70%;
height: 60px;
float:left;
height:550px;
margin:0;
}

#foot {
background-color: #099;
height: 60px;
width: 90%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left:5%;
float:left;
}
#right ul {
list-style-type: none;
padding:0px;
margin:0px;
}
#right li {
background-color: #3CC;
float: left;
height: 275px;
width: 259px;
border: 1px solid #666;
padding:0px;
margin:0px;
}
#r1,#r2,#r3,#r4,#r4,#r5,#r6 {
background-color: #099;
margin: 0px;
padding: 0px;
float: left;
height: 49.5%;
width: 33%;
border: 1px solid #666;
}