zoukankan html css js c++ java

css笔记17：盒子模型加强版的案例

1.先看看经典案例效果图，导出思路：

分析：思路

基本结构

<div>

<ul>

…………

</ul>

</div>

2.案例演示：

（1）box2.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>盒子模型加强</title>
<link rel="stylesheet" type="text/css" href="box2.css" />
</head>

<body>
<div class="div1">
<!--ul在布局中可以控制显示内容的多少-->
<ul class="faceul">

<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
<li>
<img src="030Q92636-49.jpg"/>
</li>
</ul>

</div>
</body>
</html>

（2）box2.css

@charset "utf-8";
/* CSS Document */

.div1 {
    width:500px;
    height:600px;
    border:1px solid gray;
}

.faceul{
    width:400px;
    height:550px;
    border:1px solid red;
    padding:5px;
    margin:10px;
}

.faceul li {
    list-style-type:none;
    float:left;/*左浮动*/
    width:55px;
    height:55px;
    border:1px solid red;
    margin-right:5px;
    margin-top:5px;
}

.faceul li img {
    width:50px;
    height:50px;
    margin-left:5px;
    margin-top:5px;
}

效果图：

这时候我们再次回顾当初盒子模型图，印象就更深了：

查看全文

相关阅读:
Scrapy(爬虫)基本运行机制
 Python面向对象中的“私有化”
基于Requests和BeautifulSoup实现“自动登录”
BeautifulSoup模块
 Python爬虫之-Requests
踩坑之jinja2注释问题(Flask中)
Struts2 从一个Action跳至另一个Action
@JSON(serialize=false)，过滤不需要的变量
 JS function的参数问题
 nginx反向代理配置及优化

原文地址：https://www.cnblogs.com/hebao0514/p/4625377.html