盒子模型的综合应用

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. Java实现智能机器自动操作电脑

    package com.tz.util; import java.awt.Robot; import java.awt.event.InputEvent; import java.awt.event. ...

  2. 使用ImageCreate()创建一个代表空白图像的变量

    在建立图像创建环境之前,还需要做一些准备工作.首先,安装t1lib接着安装jpeg-6b,然后再安装GD库文件.在安装时一定要按这里给定的顺序进行安装,因为在编译GD入库时会用到jpeg-6b,如果没 ...

  3. BizTalk开发系列(二十二) 开发自定义Map Functoid

    尽管 BizTalk Server 提供许多Functoid以支持一系列不同的操作,但仍可能会遇到需要其他方法的情况.<BizTalk开发系列 Map扩展开发>介绍了通过使用自定义 XSL ...

  4. 【iCore3 双核心板】例程十一：DMA实验——存储器到存储器的传输

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

  5. JS写的CRC16校验算法（查表法）

    var CRC = {}; CRC._auchCRCHi = [ 0x00, 0xC1, 0x81, 0x40, 0x01, 0xC0, 0x80, 0x41, 0x01, 0xC0, 0x80, 0 ...

  6. mongodb 安装与启动简单使用

    环境:mac 10.11.6 一.安装步骤:按照官网的教程: 1.打开终端 安装或升级brew: brew update 2.安装mongoDB二进制文件: brew install mongodb ...

  7. PHP 标准库 SPL 之数据结构栈（SplStack）简单实践

    PHP 5.3.0 版本及以上的堆栈描述可以使用标准库 SPL 中的 SplStack class,SplStack 类继承双链表 ( SplDoublyLinkedList ) 实现栈. 代码: & ...

  8. centos7 挂载数据盘

    centos 挂载数据盘1.运行 fdisk -l 命令查看数据盘.注意:在没有分区和格式化数据盘之前,使用 df -h 命令是无法看到数据盘的. 如果执行了 fdisk -l 命令后,没有发现 /d ...

  9. mac下docker使用笔记

    安装docker https://docs.docker.com/mac/ 启动docker环境launchpad -> Docker Quickstart Terminal ##       ...

  10. java调用 webservices接口实现天气预报

    最近要用到web services,而这两天也比较有空,就弄了一个获取天气预报的Util.以前以为这有多难,因为数据来源是个困难.现在用web services的技术,发现下面这个是相当不错的.下面就 ...