盒子模型的综合应用

CSS提高1

Div   ul    li 的综合应用很多的网页布局现在都用到这种模式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>homework2.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="homework2.css" type="text/css"></link>

</head>

<body>

<div class="div1">

this is the test;

<ul  class="faceul">

<li><img src="images/mxlyf3.jpg"><a  href="#">刘亦菲</a></li>

<li><img src="images/mxlyf3.jpg"><a  href="#">刘亦菲</a></li>

<li><img src="images/mxlyf3.jpg"><a  href="#">刘亦菲</a></li>

<li><img src="images/mxlyf3.jpg"><a  href="#">刘亦菲</a></li>

<li><img src="images/mxlyf3.jpg"><a  href="#">刘亦菲</a></li>

<li><img src="images/mxlyf3.jpg"><a  href="#">刘亦菲</a></li>

<li><img src="images/mxlyf3.jpg"><a  href="#">刘亦菲</a></li>

<li><img src="images/mxlyf3.jpg"><a  href="#">刘亦菲</a></li>

</ul>

</div>

</body>

</html>

CSS 代码：

@CHARSET "UTF-8";

/*将body的样式清空*/

body{

margin:0px;

padding:0px;

}

/*设计div的位置*/

.div1{

width:500px;

height:300px;

border: 1px solid black;

margin-left: 100px;

margin-top: 50px;

}

/* 设计图片区域的位置大小*/

.faceul{

width: 450px;

height: 250px;

border: 1px solid green;

margin-top: 25px;

margin-left: 25px;

list-style-type: none;

}

/*用于控制单个图片区域的大小*/

.faceul   li {

width: 75px;

height: 85px;

border: 1px solid red;

float: left;      /*左浮动*/

margin-left: 5px;

margin-top: 5px;

}

/*控制文字*/

.faceul   li  a {

margin-left: 10px;

}

a:LINK{

text-decoration: none;

color: blue;

}

a:HOVER{

text-decoration: underline;

color: red;

}

/*控制图片大小和位置*/

.faceul   li  img{

width:65px;

height:65px;

margin-left: 5px;

margin-top: 5px;

}

CSS提高2

设计优酷的其中一个模块

Html  代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>homework3.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="homework3.css" type="text/css"></link>

</head>

<body>

<div  class="div1">

<div>

<span   class="span1"><font  class="font1">优酷牛人</font><a  href="#">更多牛人</a></span>

<ul   class="faceul">

<li  ><img src="images/mxlyf3.jpg"></br><a  href="#">张三</a></li>

<li  ><img src="images/mxlyf3.jpg"></br><a  href="#">李四</a></li>

<li  ><img src="images/mxlyf3.jpg"></br><a  href="#">王五</a></li>

</ul>

</div>

<div>

<span   class="span1"><font  class="font1">网站达人</font><a  href="#">更多牛人</a></span>

<ul   class="faceul">

<li  ><img src="images/mxlyf3.jpg"></br><a  href="#">张三</a></li>

<li  ><img src="images/mxlyf3.jpg"></br><a  href="#">李四</a></li>

<li  ><img src="images/mxlyf3.jpg"></br><a  href="#">王五</a></li>

</ul>

</div>

<div>

<span   class="span1"><font  class="font1">设计大牛</font><a  href="#">更多牛人</a></span>

<ul   class="faceul">

<li  ><img src="images/mxlyf3.jpg"></br><a  href="#">张三</a></li>

<li  ><img src="images/mxlyf3.jpg"></br><a  href="#">李四</a></li>

<li  ><img src="images/mxlyf3.jpg"></br><a  href="#">王五</a></li>

</ul>

</div>

</div>

</body>

</html>

CSS  代码：

@CHARSET "UTF-8";

body{

margin:0  auto;

width:1000px;

border:1px solid red;

padding: 0px;

}

/*定义常用的字体*/

.font1{

font-weight: bold;

font-size: 20px;

margin-left: 5px;

}

/*控制外层的div*/

.div1{

margin-left: 100px;

margin-top: 100px;

width: 500px;

height: 250px;

border: 1px solid black;

}

/*定义span*/

.span1{

/*background: orange;*/

display: block;

}

.span1  a {

margin-left: 330px;

font-weight: bold;

}

.faceul{

margin-left:0px;

width: 500px;

height: 50px;

/*    background: green;  */

list-style-type: none;

}

.faceul  li {

float: left;

width: 65px;

height: 80px;

margin-left: 70px;

/*    background-color: pink; */

text-align: center;  /*表示放在该元素的其他元素被左右居中*/

}

.faceul  li  img{

width: 60px;

height: 60px;

margin-left: 2px;

margin-top: 2px

}

/*定义超链接的样式*/

a:LINK {

text-decoration: none;

}

CSS之盒子模型及常见布局的更多相关文章

  1. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  2. [CSS属性设置，盒子模型，网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  3. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

  4. 深入理解CSS系列（一）：理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  5. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  6. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

  7. CSS 弹性盒子模型

    CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...

  8. CSS基础之盒子模型及浮动布局

    盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们日常生活中的盒子( ...

  9. CSS盒子模型与双飞翼布局

    盒子模型&双飞翼实现 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin).边框(border).内边距(padding).实际内容(content)四个属性. ...

随机推荐

  1. c++ basic 整理1

    //c++类 初始化 与 初始赋值 //C++规定 对象的 成员变量 初始化 动作发生 在进入 构造函数本体 之前 . 在构造函数内 成员变量赋值都属于 赋值 . class People { pub ...

  2. 一個相當簡潔的名字—Dyson Humidifier

    現在不止是白領級人物開始網購使用加濕器對皮膚的一個乾燥祈禱防護作用.目前新研究的一款家用的加濕器,戴森首款推出. 作為戴森的首款加濕器產品,該公司賦予了它一個相當簡潔的名字——Dyson Humidi ...

  3. BizTalk开发系列(三十一)配置和使用HTTP适配器

    BizTalk的主机分别进程内主机和独立主机.但由于一直使用的是进程内主机,对于独立主机的认识比较模糊,前不久在做一个BizTalk的项目的时 候,个别系统使用HTTP的方式发布Txt之类的文本的.刚 ...

  4. Matlab图像处理函数：regionprops

    本篇文章为转载,仅为方便学术讨论所用,不用于商业用途.由于时间较久,原作者以及原始链接暂时无法找到,如有侵权以及其他任何事宜欢迎跟我联系,如有侵扰,在此提前表示歉意.----------------- ...

  5. IOS第12天(2,UINavigationController导航控制器)

    ****HMAppDelegate.m @implementation HMAppDelegate - (BOOL)application:(UIApplication *)application d ...

  6. 【iCore3 双核心板】例程十二：通用定时器实验——定时点亮LED

    实验指导书及代码包下载: http://pan.baidu.com/s/1kTWAAJ9 iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...

  7. swift 2.x学习笔记(一)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008400 } p.p2 { margin: 0.0px 0. ...

  8. Sharepoint 2013 user permissions（用户权限）

     Read: This permission level gives you read-only access to the website. Contribute:  In addition to ...

  9. win7下VS2015+opencv3.1.0配置

    由于opencv与vs的适配版本不同,本人在官网下载opencv3.1.0,其可以和VS2013.VS2015适配,文中以VS2015为例 opencv2.4.13-----vc11;vc12 ope ...

  10. centos升级支持到C++11, gcc4.8.2

    升级到4.8[这个应该是目前最新的啦,不过网上查的话已经到5.2啦,感觉落后一点比较稳,当然还有就是这个版本是新的里面使用最多的] wget http://people.centos.org/tru/ ...