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 ...
随机推荐
- 授人以渔式解析原生JS写轮播图
需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片.鼠标放到轮播图的图片上时不再自动轮播并且左右箭 ...
- EventEmitter：从命令式 JavaScript class 到声明函数式的华丽转身
新书终于截稿,今天稍有空闲,为大家奉献一篇关于 JavaScript 语言风格的文章,主角是函数声明式. 灵活的 JavaScript 及其 multiparadigm 相信"函数式&quo ...
- Python基础-生物信息：找出基因，生物学家使用字母A、C、T和G构成的字符串建模一个基因组。
生物信息:找出基因,生物学家使用字母A.C.T和G构成的字符串建模一个基因组.一个基因是基因组的子串,它从三元组ATG后开始在三元组TAG.TAA或TGA之前结束.此外,基因字符串的长度是3的倍数,而 ...
- 软件WEB自动化测试工具之智能元素定位
江湖一直有着这么一句名言“天下武功,唯快不破".那么在软件测试领域,自然而然我们会想到软件自动化测试.软件自动化测试的实现自然离不开软件自动化测试工具.软件自动化测试工具是软件自动化的载体, ...
- 处理asp.net core连接mysql的一个异常Sequence contains more than one matching element
晚上在那里调程序,把mysql.data组件的nuget包进行了更新,前几天好好的程序,开始抛错,跟踪断点发现以下的异常: Unable to connect to any of the specif ...
- 初识JVM：（二）Java的垃圾回收机制详解
声明:本文主要参考https://www.cnblogs.com/codeobj/p/12021041.html 仅供个人学习.研究之用,请勿用于商业用途,如涉及侵权,请及时反馈,立刻删除. 一.Ja ...
- Java已五年1—二本物理到前端实习生到Java程序员「回忆贴」
关键词:郑州 二本 物理专业 先前端实习生 后Java程序员 更多文章收录在码云仓库:https://gitee.com/bingqilinpeishenme/Java-Tutorials 前言 没有 ...
- Dubbo之服务消费原理
前言 上篇文章<Dubbo之服务暴露>分析 Dubbo 服务是如何暴露的,本文接着分析 Dubbo 服务的消费流程.主要从以下几个方面进行分析:注册中心的暴露:通过注册中心进行服务消费通知 ...
- Vysor Pro1.9.3破解，连接 USB 数据线在电脑上远程控制 Android 手机平板/同步显示画面
Vysor PRO 破解方法 1.下载Vysor Pro, Vysor Pro下载地址 ,chrome版需要挂梯子. 下载后,能连接,但是清晰度太低,能使用的功能也很少,下面我们就开始来破解它. ...
- MyBatis框架——快速入门
主流的ORM框架(帮助开发者实现数据持久化工作的框架): 1.MyBatis: 半自动化ORM框架,半自动:指框架只完成一部分功能,剩下的工作仍需开发者手动完成. MyBatis 框架没有实现 POJ ...