要实现的案例：

1.分析布局

2.划分文件结构：

3.编写css代码

  1. * {
  2.     padding: 0;
  3.     margin: 0;
  4. }
  5.  
  6. body {
  7.     font-size: 16px;
  8.     color: burlywood;
  9. }
  10.  
  11. #container {
  12.     width: 900px;
  13.     margin: 0 auto;
  14. }
  15.  
  16. #header {
  17.     height: 220px;
  18.     margin-bottom: 5px;
  19. }
  20.  
  21. #nav {
  22.     /*导航*/
  23.     height: 40px;
  24.     background-color: aqua;
  25.     margin-bottom: 5px;
  26.     font: 18px/30px;
  27.     /*字体大小   行高*/
  28.     color: black;
  29.     letter-spacing: 2px;
  30.     /*字符间距*/
  31.     text-align: center;
  32. }
  33.  
  34. #main {
  35.     height: 900px;
  36.     overflow: hidden;
  37.     margin-bottom: 5px;
  38. }
  39.  
  40. #aside {
  41.     width: 300px;
  42.     height: 900px;
  43.     background-color: rgb(53, 162, 235);
  44.     float: left;
  45.     margin-right: 5px;
  46.     text-align: center;
  47.     font-size: 14px;
  48. }
  49.  
  50. #content {
  51.     height: 900px;
  52.     width: 595px;
  53.     float: left;
  54.     background-color: #cff;
  55. }
  56.  
  57. #footer {
  58.     text-align: center;
  59.     height: 70px;
  60.     color: black;
  61.     background-color: #6cf;
  62.     clear: both;
  63.     line-height: 70px;
  64. }

效果图：

4.代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>i coffee</title>
  9.     <link rel="stylesheet" href="css/style.css">
  10. </head>
  11.  
  12. <body>
  13.     <div id="container">
  14.         <div id="header">
  15.             <img src="data:image/banner.jpg">
  16.             <div id="icon-list">
  17.                 <img src="data:image/3.bmp" alt="">
  18.                 <img src="data:image/2.bmp" alt="">
  19.                 <img src="data:image/1.bmp" alt="">
  20.                 <img src="data:image/4.bmp" alt="">
  21.             </div>
  22.         </div>
  23.         <div id="nav">
  24.             <a href="#">咖啡MENU</a> |
  25.             <a href="#">咖啡COOK</a> |
  26.             <a href="#">咖啡STORY</a> |
  27.             <a href="#">咖啡NEWS</a> |
  28.             <a href="#">咖啡PARTY</a>
  29.         </div>
  30.         <div id="main">
  31.             <div id="aside">
  32.                 <h2 class="h">咖啡MENU</h2>
  33.                 <table>
  34.                     <tr>
  35.                         <th></th>                             //表头
  36.                         <th>拿铁<br />Latte</th>
  37.                         <th>卡布奇诺<br />Cappuccino</th>
  38.                         <th>摩卡<br />Mocha</th>
  39.                         <th>浓缩咖啡<br />Espresso</th>
  40.                     </tr>
  41.                     <tr>
  42.                         <th scope="row">大杯</th>
  43.                         <td>35</td>
  44.                         <td>35</td>
  45.                         <td>35</td>
  46.                         <td>30</td>
  47.                     </tr>
  48.                     <tr>
  49.                         <th scope="row">中杯</th>    //行表头
  50.                         <td>30</td>
  51.                         <td>30</td>
  52.                         <td>30</td>
  53.                         <td>25</td>
  54.                     </tr>
  55.                     <tr>
  56.                         <th scope="row">小杯</th>
  57.                         <td>25</td>
  58.                         <td>25</td>
  59.                         <td>25</td>
  60.                         <td>20</td>
  61.                     </tr>
  62.                 </table>
  63.                 <div id="i-list">
  64.                     <div class="ppl rote-left"><img src="data:image/Cappuccino.jpg"></div>
  65.                     <div class="ppl rote-right"><img src="data:image/Espresso.jpg"></div>
  66.                     <div class="ppl rote-left"><img src="data:image/Latte.jpg"></div>
  67.                     <div class="ppl rote-right"><img src="data:image/Mocha.jpg"></div>
  68.                 </div>
  69.             </div>
  70.             <div id="content">
  71.                 <div class="subcon">
  72.                     <img src="data:image/Latte.jpg" alt="">
  73.                     <div class="subtext">
  74.                         <h2>拿铁Caffè Latte</h2><br/>
  75.                         <p>这是一种传统的经典饮料——浓缩咖啡调入热牛奶，其上覆盖一层轻盈的奶沫。 品尝此款咖啡时，您可以选择特别加入某种口味（如香草，焦糖或杏仁口味）的糖浆。
  76.                         </p>
  77.                     </div>
  78.                 </div>
  79.                 <div class="subcon">
  80.                     <img src="data:image/Cappuccino.jpg" alt="">
  81.                     <div class="subtext">
  82.                         <h2>卡布奇诺Cappuccino</h2>
  83.                         <br/>
  84.                         <p>这款咖啡沿袭传统技法，由我们技艺娴熟的咖啡吧员 将手工制作的热奶与 细腻奶泡轻柔地浇在浓缩咖啡之上制作而成。
  85.                         </p>
  86.                     </div>
  87.                 </div>
  88.                 <div class="subcon">
  89.                     <img src="data:image/Mocha.jpg" alt="">
  90.                     <div class="subtext">
  91.                         <h2>摩卡Caffè Mocha</h2><br/>
  92.                         <p>这款咖啡由醇香的摩卡酱，浓缩咖啡和蒸奶相融相合，上面覆以搅打奶油。 寒冷的日子里，忧伤的时光中,任何人都无法抵抗她的诱惑。
  93.                         </p>
  94.                     </div>
  95.                 </div>
  96.                 <div class="subcon">
  97.                     <img src="data:image/Espresso.jpg" alt="">
  98.                     <div class="subtext">
  99.                         <h2>浓缩咖啡Espresso</h2><br/>
  100.                         <p>这是咖啡的精粹，以最浓缩的方式显现。浓缩咖啡带点焦糖味道，浓厚馥郁。</p>
  101.                     </div>
  102.                 </div>
  103.             </div>
  104.         </div>
  105.         <div id="footer">网站设计课程版权 2015-2020</div>
  106.     </div>
  107.     <div id="l-fix">
  108.         <img src="data:image/cooker.jpg">
  109.     </div>
  110. </body>
  111.  
  112. </html>
  1. * {
  2.     padding: 0;
  3.     margin: 0;      //清除浏览器样式
  4. }
  5.  
  6. body {
  7.     font-size: 16px;
  8.     color: darksalmon;
  9. }
  10.  
  11. #container {
  12.     width: 900px;
  13.     margin: 0 auto;    //居中
  14. }
  15.  
  16. #header {
  17.     height: 220px;
  18.     margin-bottom: 5px;
  19.     position: relative;    //相对定位
  20. }
  21.  
  22. #icon-list {
  23.     position: absolute;    //绝对定位
  24.     width: 130px;
  25.     height: 30px;
  26.     top: 170px;
  27.     right: 30px;
  28.     /* font-size:0;  可以去掉图片间隔 */
  29. }
  30.  
  31. #nav {
  32.     /*导航*/
  33.     height: 40px;
  34.     background-color: #6cf;
  35.     margin-bottom: 5px;
  36.     font: 18px/30px;
  37.     /*字体大小   行高*/
  38.     color: black;
  39.     letter-spacing: 2px;
  40.     /*字符间距*/
  41.     text-align: center;    //居中
  42.     line-height: 40px;
  43. }
  44.  
  45. #main {
  46.     overflow: hidden;     //超出部分不显示
  47.     margin-bottom: 5px;
  48. }
  49.  
  50. .h {
  51.     color: black;
  52. }
  53.  
  54. #aside {
  55.     width: 300px;
  56.     background-color: rgb(53, 162, 235);
  57.     float: left;     //左浮动
  58.     margin-right: 5px;
  59.     text-align: center;
  60.     font-size: 14px;
  61. }
  62.  
  63. .i-list {
  64.     margin: 0 auto;
  65.     width: 85px;
  66. }
  67.  
  68. .i-list img:hover {      //针对i-list类的img做鼠标移上去的设定
  69.     transform: scale(1.2);       //放大1.2倍
  70.     -webkit-transform: scale(1.2);
  71.     -moz-transform: scale(1.2);
  72.     -ms-transform: scale(1.2);
  73.     -o-transform: scale(1.2);
  74. }
  75.  
  76. .ppl {        //图片墙的公共样式
  77.     width: 85px;
  78.     padding: 10px;
  79.     margin: 0 auto;
  80.     background-color: #eee;
  81.     border: 2px solid gray;
  82.     box-shadow: 2px 2px 4px #aaa;
  83.     border-radius: 5px;    //圆角
  84.     -webkit-border-radius: 5px;
  85.     -moz-border-radius: 5px;
  86.     -ms-border-radius: 5px;
  87.     -o-border-radius: 5px;
  88. }
  89.  
  90. #i-list img {     //图片公共样式
  91.     height: 95px;
  92.     width: 85px;
  93.     margin: 0 auto;
  94. }
  95.  
  96. .rote-left {
  97.     transform: rotate(7deg);   //顺时针旋转7度
  98.     -webkit-transform: rotate(7deg);
  99.     -moz-transform: rotate(7deg);
  100.     -ms-transform: rotate(7deg);
  101.     -o-transform: rotate(7deg);
  102. }
  103.  
  104. .rote-right {
  105.     transform: rotate(-7deg);   //逆时针旋转7度
  106.     -webkit-transform: rotate(-7deg);
  107.     -moz-transform: rotate(-7deg);
  108.     -ms-transform: rotate(-7deg);
  109.     -o-transform: rotate(-7deg);
  110. }
  111.  
  112. #content {
  113.     width: 595px;
  114.     float: left;     //左浮动
  115.     background-color: #cff;
  116. }
  117.  
  118. .subcon {
  119.     width: 550px;
  120.     height: 190px;
  121.     margin: 10px auto;
  122.     clear: both;
  123. }
  124.  
  125. .subcon img {
  126.     margin: 5px;
  127.     padding: 5px;
  128.     float: left;
  129.     border: 1px dashed black;
  130. }
  131.  
  132. .subcon .subtext {    //公共样式
  133.     margin: 5px;
  134.     float: right;
  135.     width: 60%;
  136.     letter-spacing: 2px;
  137. }
  138.  
  139. .subcon h2 {
  140.     margin: 5px;
  141. }
  142.  
  143. .subcon p {
  144.     font: 16px/2em;
  145.     /* 字号大小  2倍行高 */
  146. }
  147.  
  148. #footer {
  149.     text-align: center;
  150.     height: 70px;
  151.     color: black;
  152.     background-color: #6cf;
  153.     clear: both;    //清除左右浮动
  154.     line-height: 70px;  //行高
  155. }
  156.  
  157. #nav a {
  158.     /*特别声明这个样式是针对nav里面的a标签*/
  159.     text-decoration: none;
  160. }
  161.  
  162. a:link {
  163.     color: white;
  164. }
  165.  
  166. a:visited {
  167.     color: white;
  168. }
  169.  
  170. a:hover {
  171.     color: yellow;
  172. }
  173.  
  174. a:active {
  175.     color: yellow;
  176. }
  177.  
  178. h2 {
  179.     margin-top: 20px;
  180. }
  181.  
  182. table {
  183.     margin-top: 20px;
  184.     width: 300px;
  185.     color: black;
  186. }
  187.  
  188. th {
  189.     height: 20px;
  190. }
  191.  
  192. #l-fix {
  193.     position: fixed;   //固定定位
  194.     top: 100px;
  195.     left: 5px;
  196. }

前端学习笔记--css案例的更多相关文章

  1. 前端学习笔记--CSS布局--float定位

    1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...

  2. 前端学习笔记——CSS选择器

    学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...

  3. 前端学习笔记 - Css初级篇

    有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素 块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可 ...

  4. web前端学习笔记(CSS变化宽度布局)

    一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...

  5. web前端学习笔记(CSS固定宽度布局)

    一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml" ...

  6. web前端学习笔记(CSS盒子的定位)

    相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它.      使用relat ...

  7. web前端学习笔记(CSS盒子的浮动)

    在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性 ...

  8. 前端学习笔记--CSS布局--层定位

    1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移 ...

  9. 前端学习笔记--CSS布局--文件流定位

    1.概述 2.文档流定位:从上到下,从左到右 代码: <!DOCTYPE html> <html lang="en"> <head> <m ...

随机推荐

  1. javascript——常用事件总结

      Event对象:Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件标签属性 当以下情况发生时,出现此事件 onabort 图像加载被中断 ...

  2. Java开发笔记（一百二十九）Swing的输入框

    Swing的输入框仍然分成两类:单行输入框和多行输入框,但与AWT的同类控件相比,它们在若干细节上有所调整.首先说单行输入框,AWT的单行输入框名叫TextField,平时输入什么字符它便显示什么字符 ...

  3. SQL——AND、OR运算符

    一.AND.OR运算符基本说明 AND : 所有条件成立,则筛选出这条记录. OR : 只要其中一个条件成立,则筛选出这条记录. 演示student表: 二.AND运算符使用 查询name = '小明 ...

  4. Log4J对系统性能的影响

    Log4J对系统性能的影响 主要体现: 1.日志输出的目的地,输出到控制台的速度比输出到文件系统的速度要慢. 2.日志输出格式不一样对性能也会有影响,如简单输出布局(SimpleLayout)比格式化 ...

  5. centos6.5升级openssh至7.9p1

    环境说明系统环境:centos 6.5 x64 openssh-5.3p1升级原因:低版本openssh存在漏洞升级目标:openssh-7.9p1 检查环境官方文档中提到的先决条件openssh安装 ...

  6. IdentityServer4使用OpenIdConnect实现单点登录

    接上一篇:IdentityServer4实现OAuth2.0四种模式之授权码模式 前面写的四种OAuth2.0实现模式只涉及到IdentityServer4的OAuth2.0特性,并没有涉及到OenI ...

  7. angularjs 中的路由 与 bootstrap标签选项卡的冲突 解决方案

    当项目中使用了angularjs 的路由,则所有 像a标签的href 的链接都会走路由,实现页面跳转,那么有些地方需要使用选项卡,就会带来麻烦. 路由使用如下图: 某页面需要使用bootstrap的选 ...

  8. springboot中常用的依赖

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  9. 【转载】C#中Add方法将往List集合末尾添加相应元素对象

    在C#的List集合操作中,有时候需要将符合条件的对象添加到已有List集合中的末尾,此时就需要使用到List集合的Add方法,Add方法的作用为将对应的元素添加到List集合末尾,Add方法签名为v ...

  10. “http”和“https”的区别是什么？优缺点是什么？

    1. http 的URL 以http:// 开头,https以https:// 开头. 2. http 标准端口是80 ,https是443. 3.https 协议需要到ca申请证书,http不需要. ...