第015讲 demo

来源:互联网 发布:新风系统价格 知乎 编辑:程序博客网 时间:2024/06/06 08:40

div+css 题目:
image

我做出来的:土的一比 中间三块还不知道怎么调整位置每次一调就飞了
image

代码:

<!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=gb2312" /><title>作业2</title><link href="home1.css" rel="stylesheet" type="text/css" /></head><body>    <div class="div1">        <span><font class="fontone">优酷大屌</font><font class="fonttwo"><a href="#">更多大屌</a></font></span>        <ul class="faceul">            <li><img src="../Editplus/othershow/015/go_home_and_shop.png"><br/><a href="#">sssss</a></li>            <li><img src="../Editplus/othershow/015/go_home_and_shop.png"><br/><a href="#">sssss</a></li>            <li><img src="../Editplus/othershow/015/go_home_and_shop.png"><br/><a href="#">sssss</a></li>        </ul>    </div></body></html>

样式:

.home1 {    font-family: "宋体";    font-size: 10px;    font-style: normal;    line-height: normal;    font-weight: normal;    font-variant: normal;    text-transform: capitalize;}.div1{    width:400px;    height:400px;    border:1px solid #FF0000;}.span{    width:auto;    height:20px;    background:#99FF99;    padding:10px;    display:block;    //margin-left:10px;    //margin-right:10px;    //margin-top::10px;}.fontone{   float:left;}.fonttwo{   float:right;}   .faceul{        list-style-type:none;    margin-top:20px;    text-align:center;}.faceul li{    width:80px;    //display:block;    //display:inline;    //margin-left:5px;    float:left;    padding:0px;    text-align:center;  margin-left:inherit;}.faceul li img{    width:auto;    height:30px;    padding:5px;    margin-top:10px;    border:1px solid red;}
0 0