div+css简单应用

程序员_Mr_Shan
330 阅读6分钟

div和css简单应用

  1. 效果图

    • 原图

效果图.png

  • 我的效果图

d4_我的效果图.png

  1. 思路

    先写css代码，做整体布局，布局中有的模块可以重复使用，整体框架如下图，通过margin（外边距）调整模块之间的距离

d4_思路.png

  1. 代码

    html代码

     <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="./d4_效果图.css">
 </head>
 ​
 <body>
     <!-- 框架 -->
     <div class="whole">
 ​
 ​
         <!--顶栏 header -->
 ​
         <div class="header">
             <div class="logo"><img src="./任务素材/logo.png" alt=""></div>
             <div class="text">做品质教育 用事实说话</div>
             <div class="tel"><img src="./任务素材/tel.jpg" alt=""></div>
         </div>
 ​
         <!--11个链接 lj -->
 ​
         <div class="lj">
             <div class="ljy"><a href="">网站首页</a></div>
             <div class="ljy"><a href="">关于我们</a></div>
             <div class="ljy"><a href="">教学环境</a></div>
             <div class="ljy"><a href="">课程体系</a></div>
             <div class="ljy"><a href="">师资力量</a></div>
             <div class="ljy"><a href="">学员风采</a></div>
             <div class="ljy"><a href="">学习园地</a></div>
             <div class="ljy"><a href="">就业园地</a></div>
             <div class="ljy"><a href="">联系我们</a></div>
             <div class="ljy"><a href="">远程教育</a></div>
             <div class="ljy"><a href="">爱尚日语</a></div>
 ​
         </div>
 ​
         <!--大图 bigpic -->
         <div class="bigpic">
             <img src="./任务素材/bigpic.png" alt="">
         </div>
 ​
         <!-- 四张图片 fpic -->
 ​
         <div class="fpic">
             <div class="img"><img src="./任务素材/1-01.png" alt=""></div>
             <div class="img"><img src="./任务素材/1-02.png" alt=""></div>
             <div class="img"><img src="./任务素材/1-03.png" alt=""></div>
             <div class="img"><img src="./任务素材/1-04.png" alt=""></div>
 ​
 ​
         </div>
 ​
         <!-- 通知公告和招生问答 tz -->
 ​
 ​
         <!-- 3月28日软件开发零基础培训班火热招生中！
 3月21日Java一SS2实训班火热招生中！
 2月28日软件开发零基础培训班名额己满！
 2月23日Java一SS2实训班名额己满！
 1月10日零基础+JAVA-2EE实训脱.
 12月27日零基础+JAVA-J2EE实训 -->
 ​
 ​
 ​
         <div class="box1">
             <div class="box2">
                 <div class="box3">
                     <div class="dbt">通知公告</div>
                     <div class="gd"><a href="">更多</a></div>
                 </div>
                 <div class="pic_li">
                     <div class="lpic"><img src="./任务素材/tongzhi.png" alt=""></div>
                     <div class="li">
                         <ul>
                             <li>3月28日软件开发零基础培训班火热招生中！</li>
                             <li>3月21日Java一SS2实训班火热招生中！</li>
                             <li>2月28日软件开发零基础培训班名额己满！</li>
                             <li>2月23日Java一SS2实训班名额己满！</li>
                             <li>1月10日零基础+JAVA-2EE实训脱.</li>
                             <li>12月27日零基础+JAVA-J2EE实训</li>
                         </ul>
 ​
 ​
                     </div>
                 </div>
 ​
 ​
             </div>
 ​
 ​
             <!-- 我是即将毕业的大学生，想学习Java但是
 为什么没有名牌大学证书，也一样拿高薪，一样
 最近T行业前景如何？元芳你怎么看？？？
 爱尚教育T实训的优势在哪里？
 以前没怎么接过软件方面，学软件开发能学会么？
 女孩是否适合学习软件开发类相关课程？ -->
             <div class="box2_2">
                 <div class="box3">
                     <div class="dbt">招生问答</div>
                     <div class="gd"><a href="">更多</a></div>
                 </div>
                 <div class="pic_li">
                     <div class="lpic"><img src="./任务素材/wenda.png" alt=""></div>
                     <div class="li">
                         <ul>
                             <li> 我是即将毕业的大学生，想学习Java但是</li>
                             <li>为什么没有名牌大学证书，也一样拿高薪，一样！</li>
                             <li>最近IT行业前景如何？元芳你怎么看？？？</li>
                             <li>爱尚教育T实训的优势在哪里？</li>
                             <li>以前没怎么接过软件方面，学软件开发能学会么？</li>
                             <li>女孩是否适合学习软件开发类相关课程？</li>
                         </ul>
 ​
 ​
                     </div>
                 </div>
 ​
             </div>
 ​
 ​
         </div>
 ​
 ​
         <!-- 教学环境 jxhj-->
         <div class="box4">
             <div class="box5">
                 <div class="cbt">教学环境</div>
                 <div class="gd"><a href="">更多</a></div>
             </div>
             <div class="simg">
                 <img src="./任务素材/20130204031427.jpg" alt="">
                 <img src="./任务素材/20130203011532.jpg" alt="">
                 <img src="./任务素材/20130204031514.jpg" alt="">
                 <img src="./任务素材/20130204031528.jpg" alt="">
                 <img src="./任务素材/20130204031556.jpg" alt="">
                 <img src="./任务素材/20130204031606.jpg" alt="">
             </div>
         </div>
         <!-- 学习园地和就业园地 -->
 ​
         <!-- 
  PP调整图像尺寸函数代码
 Android类动态加载技术
 学好Android从熟悉数据结构和算法基础.…
 学好构建高性能2EE应用的五种核心策略
 ibernate源码中几个包的作用简要介绍
 spring mvc注解怎么用 -->
 ​
         <div class="box1">
             <div class="box2">
                 <div class="box3">
                     <div class="dbt">学习园地</div>
                     <div class="gd"><a href="">更多</a></div>
                 </div>
                 <div class="pic_li">
                     <div class="lpic"><img src="./任务素材/xuyuan.png" alt=""></div>
                     <div class="li">
                         <ul>
                             <li>PP调整图像尺寸函数代码</li>
                             <li>Android类动态加载技术</li>
                             <li>学好Android从熟悉数据结构和算法基础.…</li>
                             <li>学好构建高性能2EE应用的五种核心策略</li>
                             <li>ibernate源码中几个包的作用简要介绍</li>
                             <li>spring mvc注解怎么用 </li>
                         </ul>
                     </div>
                 </div>
             </div>
 ​
 ​
             <!-- 
             孙*同学已成功入职大连华鑫广告公司
 于*涛同学已成功入职大连楼兰科技股份有限公司
 唐*英同学已成功入职大连楼兰科技股份有限公司
 李*维同学已成功入职大连耀程科技有限公司
 蔡*男同学已成功入职大连耀程科技有限公司
 杜*莹同学已成功入职大连奥雷科技有限公司 -->
             <div class="box2_2">
                 <div class="box3">
                     <div class="dbt">就业园地</div>
                     <div class="gd"><a href="">更多</a></div>
                 </div>
                 <div class="pic_li">
                     <div class="lpic"><img src="./任务素材/xuyuan.png" alt=""></div>
                     <div class="li">
                         <ul>
                             <li>孙*同学已成功入职大连华鑫广告公司</li>
                             <li>于*涛同学已成功入职大连楼兰科技股份有限公司</li>
                             <li>唐*英同学已成功入职大连楼兰科技股份有限公司</li>
                             <li>李*维同学已成功入职大连耀程科技有限公司</li>
                             <li>蔡*男同学已成功入职大连耀程科技有限公司</li>
                             <li>杜*莹同学已成功入职大连奥雷科技有限公司 </li>
                         </ul>
                     </div>
                 </div>
             </div>
 ​
 ​
 ​
         </div>
 ​
         <!-- 学员风采 -->
 ​
         <div class="box4">
             <div class="box5">
                 <div class="cbt">学员风采</div>
                 <div class="gd"><a href="">更多</a></div>
 ​
             </div>
             <div class="simg">
                 <img src="./任务素材/20130204025744.jpg" alt="">
                 <img src="./任务素材/20130204023811.jpg" alt="">
                 <img src="./任务素材/20130204023842.jpg" alt="">
                 <img src="./任务素材/20130204024024.jpg" alt="">
                 <img src="./任务素材/20130204024038.jpg" alt="">
                 <img src="./任务素材/20130204024143.jpg" alt="">
             </div>
         </div>
 ​
 ​
         <!-- 技术交流和资源共享 -->
 ​
         <div class="box1">
             <div class="box2">
                 <div class="box3">
                     <div class="dbt">技术交流</div>
                     <div class="gd"><a href="">更多</a></div>
 ​
                 </div>
                 <div class="pic_li">
                     <div class="lpic"><img src="./任务素材/jishu.png" alt=""></div>
                     <div class="li">
                         <ul>
                             <li> Spring为什么用来管理libernate?</li>
                             <li>Android培训之Androids全屏去.</li>
                             <li>net网站提高网站性能的方法介绍</li>
                             <li>java漏洞问题，甲骨文早就知道吗？</li>
                             <li>padding-与margin[区别</li>
                             <li>Android4.1.2系统更新内容最新详解</li>
                         </ul>
                     </div>
                 </div>
             </div>
 ​
             <div class="box2_2">
                 <div class="box3">
                     <div class="dbt">资源共享</div>
                     <div class="gd"><a href="">更多</a></div>
 ​
                 </div>
 ​
 ​
 ​
                 <div class="pic_li">
                     <div class="lpic"><img src="./任务素材/ziyuan.png" alt=""></div>
                     <div class="li">
                         <ul>
                             <li> Android网易顶都导航栏demo</li>
                             <li> Android开发指南</li>
                             <li> Android基础知识</li>
                             <li> Dreamweaver8.0简体中文版</li>
                             <li> struts2</li>
                             <li> oracle10g客户端精简绿色版3.5</li>
 ​
                         </ul>
                     </div>
                 </div>
             </div>
 ​
 ​
         </div>
 ​
 ​
 ​
 ​
         <!-- 师资力量 -->
         <div class="boxp">
             <div class="box5">
                 <div class="cbt">师资力量</div>
                 <div class="gd"><a href="">更多</a></div>
             </div>
             <div class="simg_2">
                 <img src="./任务素材/20130202085930.jpg" alt="">
                 <img src="./任务素材/20130202085832.jpg" alt="">
                 <img src="./任务素材/20130202085642.jpg" alt="">
                 <img src="./任务素材/20130202085427.jpg" alt="">
                 <img src="./任务素材/20130202084041.jpg" alt="">
                 <img src="./任务素材/20130202083720.jpg" alt="">
             </div>
         </div>
 ​
 ​
 ​
         <!-- 友情链接 -->
         <div-box4>
             <div class="lbt">友情链接</div>
             <div class="simg_3">
                 <img src="./任务素材/20130204013730.jpg" alt="">
                 <img src="./任务素材/20130204013605.png" alt="">
                 <img src="./任务素材/20130204013427.jpg" alt="">
                 <img src="./任务素材/20130204012917.gif" alt="">
                 <img src="./任务素材/20130203051430.png" alt="">
                 <img src="./任务素材/logo.png" alt="">
             </div>
         </div-box4>
 ​
         <!-- 底部文字 -->
 ​
         <div class="txt">
             <p>爱尚教育：软件开发、软件测试、安卓开发、T日语专业培训机构！爱尚教育做的不仅仅是就业</p>
             <p>版权所有@爱尚教育〔辽1CP备11019651-1号)咨询电话：0411-62276977/88</p>
             <p> 开发与技术支持：大连华企智源科技有限公司</p>
         </div>
 ​
     </div>
 ​
 ​
 </body>
 ​
 </html>

    css代码

     .whole {
     width: 1100px;
 ​
     /* border: 1px solid black; */
     background-color: #f2f2f2;
     margin: 100px 200px;
 }
 ​
 .header {
     height: 80px;
     /* background-color: aqua; */
 }
 ​
 .header .logo {
     width: 20%;
     height: 80%;
     /* background-color: blue; */
     margin: 10px 5px;
     float: left;
 ​
 }
 ​
 .header .text {
     width: 50%;
     height: 80%;
     /* background-color: violet; */
     float: left;
     margin: 10px 20px;
     text-align: center;
     word-spacing: 5px;
     font-size: 25px;
     line-height: 60px;
 ​
 }
 ​
 .header .tel {
     width: 20%;
     height: 80%;
     float: right;
     margin: 10px 10px;
 ​
     /* background-color: aquamarine; */
 }
 ​
 .lj {
     background-color: red;
     height: 50px;
     width: 100%;
 }
 ​
 .lj a {
     color: white;
     font-size: 20px;
 }
 ​
 .lj a:hover {
     color: blue;
 }
 ​
 .lj .ljy {
     float: left;
     margin: 14px 10px
 }
 ​
 .bigpic {}
 ​
 .bigpic img {
     width: 100%;
     margin-top: 5px;
 ​
 }
 ​
 .fpic {
     height: 140px;
     /* background-color: green; */
 }
 ​
 .fpic .img {
     margin: 10px 5px;
     float: left;
     border: #cbcbcb 2px solid;
 }
 ​
 .fpic .img img {
     width: 260px;
 }
 ​
 /* 我是分割线============================== */
 ​
 /* 通知公告和招生问答 */
 /* .tz {
     width: 1100px;
     height: 240px;
     background-color: purple;
 } */
 ​
 .box1 {
     width: 1100px;
     height: 240px;
     /* background-color: purple; */
 }
 ​
 /* 通知公告 */
 /* .tz .tzgg {
     width: 540px;
     height: 200px;
     background-color: white;
     float: left;
     margin-top: 20px;
     border: #cbcbcb 2px solid;
 ​
 } */
 ​
 .box2 {
     width: 540px;
     height: 200px;
     background-color: white;
     float: left;
     margin-top: 20px;
     border: #cbcbcb 2px solid;
 }
 ​
 /* 通知公告头部 */
 /* .tz .tzgg .tzgghead {
     height: 30px;
     background-color: yellow;
     width: 540px;
     border-bottom: #cbcbcb 2px solid;
 } */
 ​
 .box3 {
     height: 30px;
     /* background-color: yellow; */
     width: 540px;
     border-bottom: #cbcbcb 2px solid;
 }
 ​
 ​
 /* 通知公告标题 */
 /* .tz .tzgg .tzggbt {
     float: left;
     margin-left: 5px;
     margin-top: 5px;
     color: red;
     font-weight: bold;
 } */
 ​
 /* 短标题 */
 .dbt {
     float: left;
     margin-left: 5px;
     margin-top: 5px;
     color: red;
     font-weight: bold;
 }
 ​
 ​
 ​
 /* 通知公告更多 */
 .gd {
     float: right;
     margin-right: 15px;
     margin-top: 5px;
 ​
 ​
 }
 ​
 /* 更多超链接 */
 .gd a {
     color: grey;
 }
 ​
 .gd a:hover {
     color: red;
 }
 ​
 /* 通知公告图和无序 */
 .pic_li {
 ​
     height: 170px;
     width: 520px;
     /* background-color: fuchsia; */
     float: left;
 ​
 }
 ​
 .pic_li .lpic {
     float: left;
     margin-left: 5px;
     margin-top: 10px;
 ​
 }
 ​
 .pic_li .li {
     float: left;
     margin-left: 10px;
 }
 ​
 /* 无序通用 */
 li {
     list-style-type: none;
     list-style-image: url(./任务素材/li2.gif);
     margin-top: 3px;
 }
 ​
 /* 我是分割线=========================== */
 ​
 ​
 /* 招生问答 */
 /* .tz .zswd {
     width: 540px;
     height: 200px;
     background-color: white;
     float: right;
 ​
     margin-top: 20px;
     border: #cbcbcb 2px solid;
 } */
 ​
 .box2_2 {
     width: 540px;
     height: 200px;
     background-color: white;
     float: right;
 ​
     margin-top: 20px;
     border: #cbcbcb 2px solid;
 }
 ​
 /* 招生问答头部 */
 /* .tz .zswd .zswdhead {
     height: 30px;
     background-color: yellow;
     width: 540px;
     border-bottom: #cbcbcb 2px solid;
 } */
 ​
 ​
 ​
 ​
 /* 招生问答标题 */
 /* .tz .zswd .zswdbt {
     float: left;
     margin-left: 5px;
     margin-top: 5px;
     color: red;
     font-weight: bold;
 } */
 ​
 ​
 ​
 ​
 /* 无序通用 */
 li {
     list-style-type: none;
     list-style-image: url(./任务素材/li2.gif);
     margin-top: 3px;
 }
 ​
 ​
 /* 我是分割线 ==============*/
 .jxhj {
     width: 1096px;
     height: 190px;
     background-color: white;
     border: #cbcbcb 2px solid;
 ​
 }
 ​
 /* 图片框架 box4 */
 .box4 {
     width: 1096px;
     height: 190px;
     background-color: white;
     border: #cbcbcb 2px solid;
 ​
 ​
 }
 ​
 .boxp {
     width: 1096px;
     height: 260px;
     background-color: white;
     border: #cbcbcb 2px solid;
 ​
 }
 ​
 /* .jxhjhead {
     height: 30px;
     background-color: yellow;
     width: 1100px;
     border-bottom: #cbcbcb 2px solid;
 } */
 ​
 /* box5 长head */
 .box5 {
     height: 30px;
     /* background-color: yellow; */
     width: 1100px;
     border-bottom: #cbcbcb 2px solid;
 }
 ​
 ​
 /* .jxhjbt {
     float: left;
     margin-left: 5px;
     margin-top: 5px;
     width: 500px;
     color: red;
     font-weight: bold;
 } */
 ​
 /* 长标题 */
 .cbt {
     float: left;
     margin-left: 5px;
     margin-top: 5px;
     width: 500px;
     color: red;
     font-weight: bold;
 }
 ​
 ​
 ​
 /* 六张图片 */
 .simg {
     height: 160px;
     border-bottom: #cbcbcb 2px solid;
     background-color: white;
 }
 ​
 .simg img {
     margin: 20px 4px;
     width: 165px;
 ​
 }
 ​
 .simg_2 {
     height: 220px;
    
     /* background-color: brown; */
 }
 ​
 .simg_2 img {
     margin: 10px 4px;
 ​
     height: 210px;
     width: 15%;
     margin: 8px 7px;
 ​
 }
 ​
 ​
 .simg_3 {
     height: 120px;
 ​
     border-bottom: 5px solid red;
 }
 ​
 .simg_3 img {
     width: 170px;
     height: 65px;
     margin: 10px 2px;
     
 ​
 }
 ​
 .lbt {
     font-weight: bold;
     color: red;
     text-align: center;
     /* background-color: blue; */
     text-decoration: underline;
     height: 50px;
     margin-top: 15px;
     font-size: 22px;
     word-spacing: 2px;
 }
 ​
 p {
     text-align: center;
     margin: 20px 0;
 }

  2. 基础知识

    • float ：指定一个盒子（元素）是否可以浮动。

      • 属性值

        值属性
        left元素向左浮动
        right元素向右浮动
        none默认值，元素不浮动，并会显示在其在文本中出现的位置
        inherit规定应该从父元素继承float属性的值

      • float详解

  3. 注意事项

    css文件中注释中不能嵌套注释，否则乱码，报错

avatar
文章
阅读
粉丝