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 ...
随机推荐
- Ubuntu16.04如何安装bazel？
官方文档:https://docs.bazel.build/versions/master/install-ubuntu.html 我没有使用二进制的安装方法,以下是二进制的安装方法: Install ...
- blender 2.8 [学习笔记-04] 编辑模式-网格拆分
在编辑模式下
- 华为物联网IoT学习笔记目录
实验准备: 1.<小熊派功能介绍> 2.<小熊派硬件分析> 3.<STM32Cube软件安装介绍> 4.<MDK软件安装介绍> 5.<华为 IoT ...
- springboot 整合logback
日志包使用的是springboot内置的日志包,所以我们不许要再专门导入日志包 1.logback-spring.xml配置 <?xml version="1.0" enco ...
- iTerm2 都不会用，还敢自称老司机？（上）
对于需要长期与终端打交道的工程师来说,拥有一款称手的终端管理器是很有必要的,对于 Windows 用户来说,最好的选择是 Xshell,这个大家都没有异议.但对于 MacOS 用户来说,仍然毋庸置疑, ...
- HDFS 客户端读写操作详情
1. 写操作 客户端向namenode发起上传请求 namenode检查datanode是否已经存有该文件,并且检查客户端的权限 确认可以上传后,根据文件块数返回datanode栈 注:namenod ...
- yolo3各部分代码详解（超详细）
0.摘要 最近一段时间在学习yolo3,看了很多博客,理解了一些理论知识,但是学起来还是有些吃力,之后看了源码,才有了更进一步的理解.在这里,我不在赘述网络方面的代码,网络方面的代码比较容易理解,下面 ...
- 【S2-053】Struts2远程命令执行漏洞（CVE-2017-12611）
继S2-052之后,Apache Struts 2再次被曝存在远程代码执行漏洞,漏洞编号S2-053,CVE编号CVE-2017-1000112. 当开发人员在Freemarker标签中使用错误的构造 ...
- C语言程序设计（一） 为什么要学C语言
第一章 为什么要学C语言 学编程的过程,其实就是学习怎样用编程语言说话,让编译器听懂的过程. 汇编语言缺少“可移植性” 除了机器语言和汇编语言以外,几乎所有的编程语言都被统称为高级语言,它的特点是更接 ...
- js实现字符串逆向输出的4种方式
一.第一种方式(利用charAt()这个函数实现) 代码如下: var str="你好世界!!!!"; var str1="";//这里创建一个空字符串用来拼接 ...