css之div布局

来源：互联网发布：卖家加入淘宝客编辑：程序博客网时间：2024/06/07 00:46

html

<!DOCTYPE html><html><head><title>youku.html</title><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html"><link rel="stylesheet" type="text/css" href="./youku.css"></head><body><div class="div1"><div><span class="span1"><a class="font1">优酷牛人</a><a href="#1">更多牛人</a></span><ul class="faceul"><li><img src="img/1.jpg"><br /><a class="font2" href="#2">张三</a></li><li><img src="img/1.jpg"><br /><a class="font2" href="#3">张三</a></li><li><img src="img/1.jpg"><br /><a class="font2" href="#4">张三</a></li></ul></div><div><span class="span1"><a class="font1">优酷明星</a><a href="#1">更多明星</a></span><ul class="faceul"><li><img src="img/1.jpg"><br /><a class="font2" href="#2">张三</a></li><li><img src="img/1.jpg"><br /><a class="font2" href="#3">张三</a></li><li><img src="img/1.jpg"><br /><a class="font2" href="#4">张三</a></li></ul></div><div><span class="span1"><a class="font1">优酷达人</a><a href="#1">更多达人</a></span><ul class="faceul"><li><img src="img/1.jpg"><br /><a class="font2" href="#2">张三</a></li><li><img src="img/1.jpg"><br /><a class="font2" href="#3">张三</a></li><li><img src="img/1.jpg"><br /><a class="font2" href="#4">张三</a></li></ul></div></div></body></html>

css

body {width: 1000px;height: 1000px;margin: 0 auto;border: 1px solid red;}.div1 {width: 350px;height: 370px;border: 1px solid blue;}/*常用字体*/.font1 {font-size: 15px;font-weight: bold;}.font2 {font-size: 12px;float: left;}.span1 { /* background-color: green; */display: block;}.faceul {}.span1 a:LINK {text-decoration: none;float: right;font-size: 12px;}.span1 a:HOVER {text-decoration: underline;color: red;}.faceul a:LINK {text-decoration: none;margin-left: 32px;}.faceul a:HOVER {text-decoration: none;color: green;}/*  a:LINK{text-decoration: none; } a:HOVER{text-decoration: underline;color: red;  }  */.div1 ul { /* border: 1px pink solid; */height: 85px;margin-top: 5px;list-style-type: none;/* background-color: pink;  */padding: 0;}.div1 li {float: left;margin-left: 25px;}.div1 img {height: 80px;margin: 0px;}

0 0