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 ...
随机推荐
- SQLyog试用到期的解决方法（仅供个人学习使用，禁止转载或用于商业盈利）
作者:EzrealYi 本章链接:https://www.cnblogs.com/ezrealyi/p/12434105.html win+r->输入regedit->进入注册表 在计算机 ...
- VUE二 生命周期详解
vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实 ...
- django实战商城项目注册业务实现
设计到的前端知识 项目的前端页面使用vue来实现局部刷新,通过数据的双向绑定实现与用户的交互,下面来看一下需求,在用户输入内容后,前端需要做一些简单的规则校验,我们希望在在用户输入后能够实时检测,如果 ...
- 解决挖矿病毒【Xmrig miner 】CPU 100%服务器卡死问题
背景: 突然有一天,服务器访问很慢很慢,进程查看发现CPU是100%,而且没有任何降低的意思 收集: 打开任务管理器,进程查看中CPU排序,发现一个System的进程,第一想法以为是空闲利用,发现结束 ...
- selenium+Python 将登录模块化
公共模块化:(登录) login.py from selenium import webdriver from time import sleep class login(): def u ...
- WEB应用之http协议和httpd闲聊
什么是web?在日常生活中我们常常听到web这个词,它到底是什么呢?今天我们来聊一聊web应用http协议:相信生活在如今互联网时代的我们,http这个协议应该对我们不是很陌生吧!比如双十一双十二我们 ...
- Hadoop集群搭建(一)~虚拟机的创建
Hadoop集群的搭建包括,虚拟机系统的安装:安装JDK,Hadoop:克隆虚拟机:伪分布式的搭建:安装zookeeper:Hive:Hbae:Spark等等: 我将分为多篇文章来记录.这篇文章主要写 ...
- js获取按钮的文字
button按钮有两种情况: 1 <input type="button" id="button" value="button"> ...
- 我用STM32MP1做了个疫情监控平台2—Qt环境搭建
目录 1.嵌入式Qt简介 2.查看开发板Qt库的版本 3.主机搭建Qt环境 4.第一个Qt程序--Hello World 5.一些问题 @ 1.嵌入式Qt简介 Qt 是一个跨平台的应用程序开发框架.使 ...
- git版本控制系统小白教程（上）
前言:本文主要介绍git版本控制系统的一些基础使用,适合小白入门,因为内容较多,会分为两部分进行分享. Git介绍 Git是目前世界上最先进的分布式版本控制系统.并且它是一个开源的分布式版本控制系 ...