效果图：

代码实现：

样式部分style.css:

  1. *{
  2.     margin:;
  3.     padding:;
  4. }
  5. body{
  6.     background-color: #673929;
  7.     font-size: 16px;
  8.     font-family: "微软雅黑"
  9. }
  10. #conters{
  11.     margin: 0 auto;
  12.     width: 900px;
  13. }
  14.  
  15. #header{
  16.     height: 220px;
  17.     margin-bottom: 5px;
  18.     position: relative;
  19. }
  20. #icon-list{
  21.     position: absolute;
  22.     top:170px;
  23.     right: 30px;
  24.     width: 130px;
  25.     height: 30px;
  26.     /*
  27.     font-size: 0;*/
  28. }
  29.  
  30. #nav{
  31.     height: 30px;
  32.     background: #09c;
  33.     margin-bottom: 5px;
  34.     font:18px/30px 微软雅黑;
  35.     color: #fff;
  36.     letter-spacing: 2px;
  37.     text-align: center;
  38. }
  39. #nav a{
  40.     text-decoration: none;
  41. }
  42. a:link{
  43.     color: white;
  44. }
  45. a:hover{
  46.     color: yellow;
  47. }
  48. a:visited{
  49.     color: white;
  50. }
  51. a:active{
  52.     color: purple;
  53. }
  54.  
  55. #main{
  56.    background-color: red;
  57. /*   margin-bottom: 5px;*/
  58. }
  59. #aside{
  60.     width: 300px;
  61.     float: left;
  62.     background: #6cf;
  63.     text-align: center;
  64.     font-size: 14px;
  65.     color: #000;
  66. }
  67.  
  68. #aside h2{
  69.     color: black;
  70.     text-align: center;
  71.     margin-top: 2em;
  72.     letter-spacing: 1px;
  73. }
  74. #imglist{
  75.     width: 130px;
  76.     margin:0 auto;
  77.  
  78. }
  79. .pol{
  80.     width: 170px;
  81.     padding: 10px;
  82.     background-color: #eee;
  83.     border:1px solid #bfbfbf;
  84.     box-shadow: 2px 2px 4px #aaa;
  85.     border-radius: 5px;
  86. }
  87. #imglist img{
  88.     width: 65px;
  89.     height: 75px;
  90.     margin:0 auto;
  91.     font-size:;
  92. }
  93. .rotate-left{
  94.     transform:rotate(7deg);
  95.     -webkit-transform-style: rotate(7deg);
  96.     -moz-transform-style: rotate(7deg);
  97.     -ms-transform-style: rotate(7deg);
  98.     transform-style: rotate(7deg);
  99. }
  100. .rotate-right{
  101.     transform:rotate(-7deg);
  102.     -webkit-transform-style: rotate(-7deg);
  103.     -moz-transform-style: rotate(-7deg);
  104.     -ms-transform-style: rotate(-7deg);
  105.     transform-style: rotate(-7deg);
  106. }
  107. #inglist img:hover{
  108.     -webkit-transform-style: scale(1.2);
  109.     -moz-transform-style: scale(1.2);
  110.     -ms-transform-style: scale(1.2);
  111.     transform-style: scale(1.2);
  112. }
  113. #aside th{
  114.     font-weight: 1px;
  115.     letter-spacing: 1px;
  116. }
  117. #aside table{
  118.     text-align: center;
  119.     padding: 10px;
  120. }
  121.  
  122. #content{
  123.     width: 595px;
  124.     float: right;
  125.     background-color: #cff;
  126.     margin-bottom: 5px;
  127. }
  128. .subcon{
  129.      width: 570px;
  130.      margin:10px auto;
  131.      clear: both;
  132.  /*    border:1px dashed #000;*/
  133. }
  134. .subcon img{
  135.     margin:5px;
  136.     padding: 5px;
  137.     float: left;
  138.  
  139. }
  140. .subcon .suntext{
  141.     width: 60px;
  142.     float: left;
  143.     margin:5px;
  144. }
  145. .subcon h2{
  146.     margin:5px;
  147.     color: #673929;
  148.  
  149. }
  150. .subcon p{
  151.     font:16px/2em;
  152. }
  153.  
  154. #footer{
  155. /*    width: 900px;*/
  156.     height: 60px;
  157.     line-height: 60px;
  158.     background-color: #6cf;
  159.     clear: both;
  160.     margin-top: 5px;
  161.     text-align: center;
  162. }
  163. #fix{
  164.     position: fixed;
  165.     top: 100px;
  166.     left:5px;
  167.  
  168. }
  169. #fix img{
  170.     height: 100px;
  171.     width: 100px;
  172. }

整体结构部分index.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>咖啡店</title>
  6.     <link rel="stylesheet" href="css/style.css">
  7. </head>
  8. <body>
  9.     <div id="conters">
  10.         <div id="header">
  11.             <p><img src="data:images/banner.jpg" ></p>
  12.             <div id="icon-list">
  13.                 <img src="data:images/1.bmp" alt="">
  14.                 <img src="data:images/2.bmp" alt="">
  15.                 <img src="data:images/3.bmp" alt="">
  16.                 <img src="data:images/4.bmp" alt="">
  17.             </div>
  18.         </div>
  19.         <div id="nav">
  20.             <a href="#">咖啡MENU|</a>
  21.             <a href="#">咖啡COOK|</a>
  22.             <a href="#">咖啡STORY|</a>
  23.             <a href="#">咖啡NEWS|</a>
  24.             <a href="#">咖啡PARTY</a>
  25.         </div>
  26.         <div id="main">
  27.             <div id="aside">
  28.  
  29.                 <div id="menu">
  30.                     <h2>咖啡MENU</h2>
  31.                     <table>
  32.                         <th>
  33.                             <tr>
  34.                                 <td> </td>
  35.                                 <td>拿铁</td>
  36.                                 <td>卡不起落</td>
  37.                                 <td>摩卡</td>
  38.                                 <td>农博园</td>
  39.                             </tr>
  40.                             <tr><td> </td>
  41.                                 <td>uius</td>
  42.                                 <td>whd</td>
  43.                                 <td>duhd</td>
  44.                                 <td>dwhu</td>
  45.                             </tr>
  46.                         </th>
  47.                         <tr>
  48.                             <td>大杯</td>
  49.                             <td>45</td>
  50.                             <td>35</td>
  51.                             <td>35</td>
  52.                             <td>35</td>
  53.                         </tr>
  54.                         <tr>
  55.                             <td>中杯</td>
  56.                             <td>25</td>
  57.                             <td>25</td>
  58.                             <td>25</td>
  59.                             <td>25</td>
  60.                         </tr>
  61.                         <tr>
  62.                             <td>小杯</td>
  63.                             <td>15</td>
  64.                             <td>15</td>
  65.                             <td>15</td>
  66.                             <td>15</td>
  67.                         </tr>
  68.                     </table>
  69.                     <div id="imagelist">
  70.                         <div class="pol rotate-left"><img src="data:images/Cappuccino.jpg" alt=""></div>
  71.                         <div class="pol rotate-right"><img src="data:images/Espresso.jpg" alt=""></div>
  72.                         <div class="pol rotate-left"><img src="data:images/Mocha.jpg" alt=""></div>
  73.                         <div class="pol rotate-right"><img src="data:images/Latte.jpg" alt=""></div>
  74.                     </div>
  75.                 </div>
  76.                 <div class="box">
  77.  
  78.                 </div>
  79.                 </div>
  80.             </div>
  81.             <div id="content">
  82.                 <div class="subcon">
  83.                     <img src="data:images/Cappuccino.jpg" alt="">
  84.                     <div class="subtext">
  85.                         <h2>咖啡名称</h2>
  86.                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, blanditiis tenetur natus illum velit.</p>
  87.                     </div>
  88.                 </div>
  89.                 <div class="subcon">
  90.                     <img src="data:images/Espresso.jpg" alt="">
  91.                     <div class="subtext">
  92.                         <h2>咖啡名称</h2>
  93.                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, magni voluptatum illum tempore voluptatem iste.</p>
  94.                     </div>
  95.                 </div>
  96.                 <div class="subcon">
  97.                     <img src="data:images/Latte.jpg" alt="">
  98.                     <div class="subtext">
  99.                         <h2>咖啡名称</h2>
  100.                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae esse nisi, nulla, aliquid architecto molestias.</p>
  101.                     </div>
  102.                 </div>
  103.                 <div class="subcon">
  104.                     <img src="data:images/Mocha.jpg" alt="">
  105.                     <div class="subtext">
  106.                         <h2>咖啡名称</h2>
  107.                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, molestiae labore tenetur dolores ipsam dicta!</p>
  108.                     </div>
  109.                 </div>
  110.                 <div class="subcon">
  111.                     <img src="data:images/Latte.jpg" alt="">
  112.                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla architecto quos possimus ratione deserunt, explicabo id odit eaque deleniti minus enim perferendis maiores impedit tempora eius sequi fuga quia.</p>
  113.                 </div>
  114.             </div>
  115.         </div>
  116.         <div id="footer">
  117.             <p>我是页脚哇！！</p>
  118.         </div>
  119.     </div>
  120.     <div id="fix">
  121.         <img src="data:images/Latte.jpg" alt="">
  122.         <p>我是广告域哇</p>
  123.     </div>
  124. </body>
  125. </html>

CSS3+CSS+HTML实现网页的更多相关文章

  1. 基于CSS+dIV的网页层，点击后隐藏或显示

    一个基于CSS+dIV的网页层,用JavaScript结合Input按钮进行控制,点击后显示或隐藏,网页上常用到的特效之一,实用性较强,相信对大家的前端设计有帮助. <!DOCTYPE html ...

  2. 通过CSS让html网页中的内容不可选

    *{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; ...

  3. 基于CSS的个人网页

    前端时间做的CSS作业:基于CSS的个人网页 基于CSS的个人网页 效果图: 代码: <!DOCTYPE html> <html> <head> <meta ...

  4. html+css+js实现网页拼图游戏

    代码地址如下:http://www.demodashi.com/demo/14449.html 项目描述 使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效果 ...

  5. HTML、CSS、JavaScript网页制作从入门到精通 (刘西杰) pdf扫描版彩色版​

    html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记……同时介绍了目前流行的web标准与css网页布局实例,以及基 ...

  6. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  7. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

  8. #3使用html+css+js制作网页 番外篇 制作接收php

    使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...

  9. #3使用html+css+js制作网页 制作登录网页

    #3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...

随机推荐

  1. 一块小饼干(Cookie)的故事-下篇

    上篇介绍了注册的基本流程,下篇简单的讲讲登录的流程以及Cookie的出现 实现登录的小功能 当你在浏览器的输入框里输入localhost:8080/sign_in的时候,会发起GET请求,去访问sig ...

  2. 适配iphoneX

    tips iphone6设备宽高为375×667,屏幕分辨率为750×1334,故其设备像素比(dpr)为2.iphoneX的设备宽高375*812,屏幕分辨率为1125x2436,故dpr=3 适配 ...

  3. oracle 10g 搭建备库以及一次DG GAP的处理情况

    1.主庫全庫備份rman target/rman> backup database format '/backup/fullbak/fullbak_%U';2.用scp傳到備庫,最好是rman目 ...

  4. 02 JPA

    JPA概述 JPA的全称是Java Persistence API, 即Java 持久化API,是SUN公司推出的一套基于ORM的规范,内部是由一系列的接口和抽象类构成.       JPA通过JDK ...

  5. python装饰器见解笔记

    def zsq(fun): def zsq_n(*args,**kwargs) print('这是装饰器需要运行内容') r = fun(*args,**kwargs) print('在被装饰函数执行 ...

  6. 建议8:恰当选用if和switch

    相对来说下面几种情况更适合switch结构 枚举表达式的值.这种枚举是可以期望的,平行逻辑关系的 表达式的值具有离散性,不具有线性的非连续的区间值 表达式的值是固定的,不是动态变化的 表达式的值是有限 ...

  7. react 给选中的li添加样式（转载）

    路:使用事件委托,关键:获取到的index必须转为数字,因为它是字符串 handleClick = (e) => { const nodeName = e.target.nodeName.toU ...

  8. asp:textbox 的 TextMode:password

    1.  用于输入或显示密码的文本框,设置属性TextMode为Password <asp:TextBox ID="txt_Password" runat="serv ...

  9. SpringBoot 集成MQTT配置

    目录 1. 前言 2. MQTT介绍 3. SpringBoot 集成MQTT 3.1 导入mqtt库 3.2 配置MQTT订阅者 3.3 配置MQTT发布者 3.4 MQTT消息处理和发送 3.4. ...

  10. Elasticsearch 之聚合分析入门

    本文主要介绍 Elasticsearch 的聚合功能,介绍什么是 Bucket 和 Metric 聚合,以及如何实现嵌套的聚合. 首先来看下聚合(Aggregation): 什么是 Aggregati ...