CSS3+CSS+HTML实现网页
效果图：
代码实现：
样式部分style.css:
*{
margin:;
padding:;
}
body{
background-color: #673929;
font-size: 16px;
font-family: "微软雅黑"
}
#conters{
margin: 0 auto;
width: 900px;
}
#header{
height: 220px;
margin-bottom: 5px;
position: relative;
}
#icon-list{
position: absolute;
top:170px;
right: 30px;
width: 130px;
height: 30px;
/*
font-size: 0;*/
}
#nav{
height: 30px;
background: #09c;
margin-bottom: 5px;
font:18px/30px 微软雅黑;
color: #fff;
letter-spacing: 2px;
text-align: center;
}
#nav a{
text-decoration: none;
}
a:link{
color: white;
}
a:hover{
color: yellow;
}
a:visited{
color: white;
}
a:active{
color: purple;
}
#main{
background-color: red;
/* margin-bottom: 5px;*/
}
#aside{
width: 300px;
float: left;
background: #6cf;
text-align: center;
font-size: 14px;
color: #000;
}
#aside h2{
color: black;
text-align: center;
margin-top: 2em;
letter-spacing: 1px;
}
#imglist{
width: 130px;
margin:0 auto;
}
.pol{
width: 170px;
padding: 10px;
background-color: #eee;
border:1px solid #bfbfbf;
box-shadow: 2px 2px 4px #aaa;
border-radius: 5px;
}
#imglist img{
width: 65px;
height: 75px;
margin:0 auto;
font-size:;
}
.rotate-left{
transform:rotate(7deg);
-webkit-transform-style: rotate(7deg);
-moz-transform-style: rotate(7deg);
-ms-transform-style: rotate(7deg);
transform-style: rotate(7deg);
}
.rotate-right{
transform:rotate(-7deg);
-webkit-transform-style: rotate(-7deg);
-moz-transform-style: rotate(-7deg);
-ms-transform-style: rotate(-7deg);
transform-style: rotate(-7deg);
}
#inglist img:hover{
-webkit-transform-style: scale(1.2);
-moz-transform-style: scale(1.2);
-ms-transform-style: scale(1.2);
transform-style: scale(1.2);
}
#aside th{
font-weight: 1px;
letter-spacing: 1px;
}
#aside table{
text-align: center;
padding: 10px;
}
#content{
width: 595px;
float: right;
background-color: #cff;
margin-bottom: 5px;
}
.subcon{
width: 570px;
margin:10px auto;
clear: both;
/* border:1px dashed #000;*/
}
.subcon img{
margin:5px;
padding: 5px;
float: left;
}
.subcon .suntext{
width: 60px;
float: left;
margin:5px;
}
.subcon h2{
margin:5px;
color: #673929;
}
.subcon p{
font:16px/2em;
}
#footer{
/* width: 900px;*/
height: 60px;
line-height: 60px;
background-color: #6cf;
clear: both;
margin-top: 5px;
text-align: center;
}
#fix{
position: fixed;
top: 100px;
left:5px;
}
#fix img{
height: 100px;
width: 100px;
}
整体结构部分index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>咖啡店</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="conters">
<div id="header">
<p><img src="data:images/banner.jpg" ></p>
<div id="icon-list">
<img src="data:images/1.bmp" alt="">
<img src="data:images/2.bmp" alt="">
<img src="data:images/3.bmp" alt="">
<img src="data:images/4.bmp" alt="">
</div>
</div>
<div id="nav">
<a href="#">咖啡MENU|</a>
<a href="#">咖啡COOK|</a>
<a href="#">咖啡STORY|</a>
<a href="#">咖啡NEWS|</a>
<a href="#">咖啡PARTY</a>
</div>
<div id="main">
<div id="aside"> <div id="menu">
<h2>咖啡MENU</h2>
<table>
<th>
<tr>
<td> </td>
<td>拿铁</td>
<td>卡不起落</td>
<td>摩卡</td>
<td>农博园</td>
</tr>
<tr><td> </td>
<td>uius</td>
<td>whd</td>
<td>duhd</td>
<td>dwhu</td>
</tr>
</th>
<tr>
<td>大杯</td>
<td>45</td>
<td>35</td>
<td>35</td>
<td>35</td>
</tr>
<tr>
<td>中杯</td>
<td>25</td>
<td>25</td>
<td>25</td>
<td>25</td>
</tr>
<tr>
<td>小杯</td>
<td>15</td>
<td>15</td>
<td>15</td>
<td>15</td>
</tr>
</table>
<div id="imagelist">
<div class="pol rotate-left"><img src="data:images/Cappuccino.jpg" alt=""></div>
<div class="pol rotate-right"><img src="data:images/Espresso.jpg" alt=""></div>
<div class="pol rotate-left"><img src="data:images/Mocha.jpg" alt=""></div>
<div class="pol rotate-right"><img src="data:images/Latte.jpg" alt=""></div>
</div>
</div>
<div class="box"> </div>
</div>
</div>
<div id="content">
<div class="subcon">
<img src="data:images/Cappuccino.jpg" alt="">
<div class="subtext">
<h2>咖啡名称</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, blanditiis tenetur natus illum velit.</p>
</div>
</div>
<div class="subcon">
<img src="data:images/Espresso.jpg" alt="">
<div class="subtext">
<h2>咖啡名称</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, magni voluptatum illum tempore voluptatem iste.</p>
</div>
</div>
<div class="subcon">
<img src="data:images/Latte.jpg" alt="">
<div class="subtext">
<h2>咖啡名称</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae esse nisi, nulla, aliquid architecto molestias.</p>
</div>
</div>
<div class="subcon">
<img src="data:images/Mocha.jpg" alt="">
<div class="subtext">
<h2>咖啡名称</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, molestiae labore tenetur dolores ipsam dicta!</p>
</div>
</div>
<div class="subcon">
<img src="data:images/Latte.jpg" alt="">
<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>
</div>
</div>
</div>
<div id="footer">
<p>我是页脚哇！！</p>
</div>
</div>
<div id="fix">
<img src="data:images/Latte.jpg" alt="">
<p>我是广告域哇</p>
</div>
</body>
</html>
CSS3+CSS+HTML实现网页的更多相关文章
- 基于CSS+dIV的网页层，点击后隐藏或显示
一个基于CSS+dIV的网页层,用JavaScript结合Input按钮进行控制,点击后显示或隐藏,网页上常用到的特效之一,实用性较强,相信对大家的前端设计有帮助. <!DOCTYPE html ...
- 通过CSS让html网页中的内容不可选
*{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; ...
- 基于CSS的个人网页
前端时间做的CSS作业:基于CSS的个人网页 基于CSS的个人网页 效果图: 代码: <!DOCTYPE html> <html> <head> <meta ...
- html+css+js实现网页拼图游戏
代码地址如下:http://www.demodashi.com/demo/14449.html 项目描述 使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效果 ...
- HTML、CSS、JavaScript网页制作从入门到精通 (刘西杰) pdf扫描版彩色版
html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记……同时介绍了目前流行的web标准与css网页布局实例,以及基 ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
- #3使用html+css+js制作网页 番外篇 制作接收php
使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...
- #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 ...
随机推荐
- Electron打包H5网页为桌面运行程序
一.安装配置环境 Electron(一种桌面应用程序运行时),Electron 把 Chromium 和 Node 合并到一个单独的运行时里面,很适合开发桌面 web 形式的应用程序,通过Node它提 ...
- 前端每日实战：60# 视频演示如何用纯 CSS 创作一块乐高积木
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKKqrv 可交互视频 此视频是可 ...
- 对HTML语义化的一些理解和记录
什么是HTML语义化 说HTML语义化就要先说说HTML到底负责的什么?下面摘自维基百科: 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页 ...
- 前端javascript知识（三）
函数记忆,判断是不是质数. 方法一: function isPrime1(n){ if(n<=3){return true} else{ for(var i=2;i<Math.sqrt(n ...
- postgreSQL外键引用查询 查询外键被那些表占用
根据一个表名,查询所有外键引用它的表,以及那些外键的列名key_column_usage(系统列信息表),pg_constraint(系统所有约束表) SELECT x.table_name, x.c ...
- Overt.GrpcTemplate.Service 模板使用教程
阅读这篇文章需要先阅读我的另外一篇文章,目前还未发布出来,待发布中... 1. Overt.GrpcTemplate.Service .Net Core 3.1 版本 模板名称改成 Overt.Grp ...
- gulp VS grunt
前公司代码一直用grunt部署, 偶然了解gulp后:学习gulp并用gulp和grunt在一小项目中实践,对两者之间的用法及区别有所了解后总结这一篇小博文:本文根据实战的项目配置文件,简单讲解实现相 ...
- go例子(三) 使用context实现发牌手策略
使用context包实现发牌手策略, 发牌手策略:罗永浩在介绍TNT工作站时描述,将一个任务分发给多个处理者处理,谁先处理完使用谁的结果,取消其他的处理者的任务. 经典的例子:同时在百度.google ...
- 《Java8 Stream编码实战》正式推出
当我第一次在项目代码中看到Stream流的时候,心里不由得骂了一句"傻X"炫什么技.当我开始尝试在代码中使用Stream时,不由得感叹真香. 记得以前有朋友聊天说,他在代码中用了 ...
- Python基础篇(三)_函数及代码复用
Python基础篇_函数及代码复用 函数的定义.使用: 函数的定义:通过保留字def实现. 定义形式:def <函数名>(<参数列表>): <函数体> return ...