贵州理工学院实验报告
学院：          专业：              班级：
姓名
学号
实验组
1
实验时间
2018.7.25
指导教师
张德跃有没有比较好的安卓开发教程
成绩
实验项目名称
CSS+DIV页面布局实验
实验目的及要求
实验内容:
通过div+CSS技术配合盒子模型设计原型，实现大型商务网站首页布局
实验内容及主要步骤
一． 实验内容
制作一个商务网站的页面布局：
Html代码如下：
<!DOCTYPE html>
松翰单片机c语言教程视频<meta charset="utf-8">
<html>
<head>
    <title>小米之家框架</title>
    <link rel="stylesheet" type="text/css" href="xiaomi1.css">
</head>
<body>
    <div class="top">码头</div>
    <div class="navigation">导航</div>
    <div class="product">
        <div class="fright"></div>
        <div class="fleft"></div>
        <div class="base1">1</div>
        <div class="base">2</div>
        <div class="base">3</div>
        <div class="base">4</div>
    </div>
    <div class="special">
        <div class="shop"><br/><br/>小米闪购</div>
        <div class="shop0"></div>
        <div class="shop1"></div>
        <div class="shop1"></div>
        <div class="shop1"></div>
        <div class="shop1"></div>
        <div class="shop2"></div>
        <div class="shop3"></div>
        <div class="shop2"></div>
    </div>
    <div class="product1">
        <div class="navigation"></div>
        <div class="fright"> </div>
            <div class="fleft">
                <div class="box">1</div>
                <div class="box">2</div>
                <div class="box">3</div>
                <div class="box">4</div>
                <div class="box">5</div>
                <div class="box">6</div>
                <div class="box">7</div>
                <div class="box">8</div>
                <div class="p1">9</div>
            </div>
        </div>
简单网页设计模板ps        <div class="p2">10</div>
        <div class="p3"></div>
    </div>
    <div class="p4">
        <div class="p5">1</div>
        <div class="p6">2</div>
    </div>
    <div class="p7">2</div>
</body>
</html>
CSS修饰代码入下：
*{margin: 0px;padding: 0px}
.top{
   
    background-color: #333;
    height: 40px;
   
}
.navigation{
  width:1226px;   
  height: 50px;
  border:1px solid yellow;
  background-color:yellow;
  margin-right: auto;
  margin-left: auto;
}
.product{
    height: 420px;
    width:1226px;
    margin-right: auto;
      margin-left: auto;
      border: solid red;
}
.product>.fright{
    height: 420px;
    width:226px;
    background-color: red;
    margin-right: auto;
    float: left;
      }
.product>.fleft{
    height: 420px;
    width:998px;
    background-color: blue;
    float: right;
}
.product>.base{
    height:170px;
    width:315px;
    border: 1px solid red;
    float: left;
    margin-top:15px;
    margin-left: 15px;
}
.product>.base1{
    height:170px;
    width:226px;
    border: 1px solid red;
    float: left;
    margin-top: 15px;
}
.special{
    width: 1226px;
    height: 438px;
    border: 1px solid red;
    margin-right: auto;
      margin-left: auto;
      margin-top: 200px;
}
.special>.shop{
    width: 1226px;
    height: 58px;
    border: 1px solid blue;
}
.special>.shop0{
    height: 380px;
    width: 226px;
    border: 1px solid red;
   
    float: left;
}
.special>.shop1{
    height: 380px;
    width: 232.5px;
    border: 1px solid red;
    margin-left:15px;
    float: left;
}
.special>.shop2{
    height: 58px;
    width: 1226px;
    float: left;
}
html个人网页完整代码div+css
.special>.shop3{
    height: 120px;
    width: 1226px;
    border: 1px solid red;
    float: left;
}
.product1{
    height: 470px;
    width:1226px;
    margin-right: auto;
      margin-left: auto;
      border: solid red;
      margin-top: 226px;
  }
  .product1>.fright{
    height: 420px;
    width:226px;
    background-color: red;
    margin-right: auto;
    float: left;
      }
.product1>.fleft{
    height: 420px;
    width:998px;
    background-color: blue;
    float: right;
}
.product1>.fleft>.box{
    width: 247px;
    height: 208px;
    border: 1px solid red;
    float: left;
}
.p1{
    height: 480px;
}
.p2{
    width: 1226px;
    height: 130px;
    border: 1px solid red;
    margin-right: auto;
      margin-left: auto;
      margin-top: 70px;
}
.p3{
    height: 50px;
}
.p4{
    height: 150px;
    width: 1226px;
    border: 1px solid red;
    margin-right: auto;
    margin-left: auto;
}
.p5{
    height: 150px;
    width: 798px;
    border: 1px solid red;
    float: left;
开票xml导入模板}
.p6{
python教程下载百度网盘    height: 150px;
    width: 424px;
    border: 1px solid red;
    float: left;
}
.p7{
    height: 120px;
    width: 1226px;
    border: 1px solid red;
    margin-right: auto;
    margin-left: auto;
}
运行得到：
实验总结
通过这次学习，我懂了的用CSS去修饰HTML。让我设计的网站更加美观了，每一次的学习都有相应的进步，我希望在借来的日子里能让我收获更多的知识。期待着自己能设计出一个更好的网站
指导教师意见
签名：     
年    月    日

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。