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 ...
随机推荐
- 提取.bank音频包。 Extract .bank audio files
转载请注明出处! 首先我们需要提取的文件是 .bank 的音频文件包,里面包含很条音频. 这是我们会用到工具 step1: 运行 quickbms.exe, 它会自动打开选择文件窗口,我们直接选择下 ...
- 学习使用Guava Cache
官方文档:https://github.com/google/guava/wiki/CachesExplained 目录 一.guava cache介绍 二.快速入门 2.1.引入依赖 2.2.第一个 ...
- 单页面和多页面的网页差别比较（SPA）
单页面应用(singlePAge Web Application) 多页面应用MultiPage Applicaton,MPA) 组成 一个外壳页面和多个页面片段组成 多个完整的页面组成 资源公用 ...
- W3C的盒子模型和IE的盒子模型
盒子模型分为两种:W3C盒子模型(标准盒子模型)和IE盒子模型 盒子模型组成:content+padding+border+margin 标准盒子模型的width就是content 而IE盒子模型的w ...
- vue2.0中eventBus实现兄弟组件通讯
我们知道,在vue中父子组件的通讯是通过props和自定义事件搞定的,简单那的非父子组件通讯用bus(一个空的Vue实例),针对中大型的项目会选择vuex,然而小项目的话,便捷的解决方案就是event ...
- 扫码枪读取条形码数据（vue）
扫码枪是模拟键盘输入的,所有事件为document.onkeypress = function(){}. 在vue项目中,是没有window.onload的,所以在created钩子函数中做: var ...
- Spring注解 - 生命周期、属性赋值、自动装配
一.Bean的生命周期 流程 Bean创建 -- 初始化 -- 销毁 创建: 单实例:在容器启动时创建对象 多实例:每次调用时创建对象 初始化: 都是在对象创建完成后,调用初始化方法 销毁: 单实例: ...
- tkinter学习1
GUI 用户交互界面 tkinter 介绍 tkinter是 python自带的gui库,对图像处理库tk的封装 #导入tkinter库 import tkinter #创建主窗口对象 root = ...
- macOS Catalina 升级软件问题
最近升级macOS Catalina系统,升级失败时多尝试几次就可以执行成功了,在使用过程中发现以下问题,大家谨慎升级!!! 存在软件启动不兼容,不存在已软件激活失效问题. 有道词典不兼容,启动异常 ...
- iviewadmin url 加入 Router base #viewDesignAdmin
router/index.js const router = new Router({ routes, base: '/viewDesignAdmin/', mode: 'history' ...