前端学习笔记--css案例
要实现的案例：
1.分析布局
2.划分文件结构：
3.编写css代码
* {
padding: 0;
margin: 0;
}
body {
font-size: 16px;
color: burlywood;
}
#container {
width: 900px;
margin: 0 auto;
}
#header {
height: 220px;
margin-bottom: 5px;
}
#nav {
/*导航*/
height: 40px;
background-color: aqua;
margin-bottom: 5px;
font: 18px/30px;
/*字体大小 行高*/
color: black;
letter-spacing: 2px;
/*字符间距*/
text-align: center;
}
#main {
height: 900px;
overflow: hidden;
margin-bottom: 5px;
}
#aside {
width: 300px;
height: 900px;
background-color: rgb(53, 162, 235);
float: left;
margin-right: 5px;
text-align: center;
font-size: 14px;
}
#content {
height: 900px;
width: 595px;
float: left;
background-color: #cff;
}
#footer {
text-align: center;
height: 70px;
color: black;
background-color: #6cf;
clear: both;
line-height: 70px;
}
效果图：
4.代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>i coffee</title>
<link rel="stylesheet" href="css/style.css">
</head> <body>
<div id="container">
<div id="header">
<img src="data:image/banner.jpg">
<div id="icon-list">
<img src="data:image/3.bmp" alt="">
<img src="data:image/2.bmp" alt="">
<img src="data:image/1.bmp" alt="">
<img src="data:image/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">
<h2 class="h">咖啡MENU</h2>
<table>
<tr>
<th></th> //表头
<th>拿铁<br />Latte</th>
<th>卡布奇诺<br />Cappuccino</th>
<th>摩卡<br />Mocha</th>
<th>浓缩咖啡<br />Espresso</th>
</tr>
<tr>
<th scope="row">大杯</th>
<td>35</td>
<td>35</td>
<td>35</td>
<td>30</td>
</tr>
<tr>
<th scope="row">中杯</th> //行表头
<td>30</td>
<td>30</td>
<td>30</td>
<td>25</td>
</tr>
<tr>
<th scope="row">小杯</th>
<td>25</td>
<td>25</td>
<td>25</td>
<td>20</td>
</tr>
</table>
<div id="i-list">
<div class="ppl rote-left"><img src="data:image/Cappuccino.jpg"></div>
<div class="ppl rote-right"><img src="data:image/Espresso.jpg"></div>
<div class="ppl rote-left"><img src="data:image/Latte.jpg"></div>
<div class="ppl rote-right"><img src="data:image/Mocha.jpg"></div>
</div>
</div>
<div id="content">
<div class="subcon">
<img src="data:image/Latte.jpg" alt="">
<div class="subtext">
<h2>拿铁Caffè Latte</h2><br/>
<p>这是一种传统的经典饮料——浓缩咖啡调入热牛奶，其上覆盖一层轻盈的奶沫。 品尝此款咖啡时，您可以选择特别加入某种口味（如香草，焦糖或杏仁口味）的糖浆。
</p>
</div>
</div>
<div class="subcon">
<img src="data:image/Cappuccino.jpg" alt="">
<div class="subtext">
<h2>卡布奇诺Cappuccino</h2>
<br/>
<p>这款咖啡沿袭传统技法，由我们技艺娴熟的咖啡吧员 将手工制作的热奶与 细腻奶泡轻柔地浇在浓缩咖啡之上制作而成。
</p>
</div>
</div>
<div class="subcon">
<img src="data:image/Mocha.jpg" alt="">
<div class="subtext">
<h2>摩卡Caffè Mocha</h2><br/>
<p>这款咖啡由醇香的摩卡酱，浓缩咖啡和蒸奶相融相合，上面覆以搅打奶油。 寒冷的日子里，忧伤的时光中,任何人都无法抵抗她的诱惑。
</p>
</div>
</div>
<div class="subcon">
<img src="data:image/Espresso.jpg" alt="">
<div class="subtext">
<h2>浓缩咖啡Espresso</h2><br/>
<p>这是咖啡的精粹，以最浓缩的方式显现。浓缩咖啡带点焦糖味道，浓厚馥郁。</p>
</div>
</div>
</div>
</div>
<div id="footer">网站设计课程版权 2015-2020</div>
</div>
<div id="l-fix">
<img src="data:image/cooker.jpg">
</div>
</body> </html>
* {
padding: 0;
margin: 0; //清除浏览器样式
}
body {
font-size: 16px;
color: darksalmon;
}
#container {
width: 900px;
margin: 0 auto; //居中
}
#header {
height: 220px;
margin-bottom: 5px;
position: relative; //相对定位
}
#icon-list {
position: absolute; //绝对定位
width: 130px;
height: 30px;
top: 170px;
right: 30px;
/* font-size:0; 可以去掉图片间隔 */
}
#nav {
/*导航*/
height: 40px;
background-color: #6cf;
margin-bottom: 5px;
font: 18px/30px;
/*字体大小 行高*/
color: black;
letter-spacing: 2px;
/*字符间距*/
text-align: center; //居中
line-height: 40px;
}
#main {
overflow: hidden; //超出部分不显示
margin-bottom: 5px;
}
.h {
color: black;
}
#aside {
width: 300px;
background-color: rgb(53, 162, 235);
float: left; //左浮动
margin-right: 5px;
text-align: center;
font-size: 14px;
}
.i-list {
margin: 0 auto;
width: 85px;
}
.i-list img:hover { //针对i-list类的img做鼠标移上去的设定
transform: scale(1.2); //放大1.2倍
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
}
.ppl { //图片墙的公共样式
width: 85px;
padding: 10px;
margin: 0 auto;
background-color: #eee;
border: 2px solid gray;
box-shadow: 2px 2px 4px #aaa;
border-radius: 5px; //圆角
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
#i-list img { //图片公共样式
height: 95px;
width: 85px;
margin: 0 auto;
}
.rote-left {
transform: rotate(7deg); //顺时针旋转7度
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
}
.rote-right {
transform: rotate(-7deg); //逆时针旋转7度
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
#content {
width: 595px;
float: left; //左浮动
background-color: #cff;
}
.subcon {
width: 550px;
height: 190px;
margin: 10px auto;
clear: both;
}
.subcon img {
margin: 5px;
padding: 5px;
float: left;
border: 1px dashed black;
}
.subcon .subtext { //公共样式
margin: 5px;
float: right;
width: 60%;
letter-spacing: 2px;
}
.subcon h2 {
margin: 5px;
}
.subcon p {
font: 16px/2em;
/* 字号大小 2倍行高 */
}
#footer {
text-align: center;
height: 70px;
color: black;
background-color: #6cf;
clear: both; //清除左右浮动
line-height: 70px; //行高
}
#nav a {
/*特别声明这个样式是针对nav里面的a标签*/
text-decoration: none;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: yellow;
}
a:active {
color: yellow;
}
h2 {
margin-top: 20px;
}
table {
margin-top: 20px;
width: 300px;
color: black;
}
th {
height: 20px;
}
#l-fix {
position: fixed; //固定定位
top: 100px;
left: 5px;
}
前端学习笔记--css案例的更多相关文章
- 前端学习笔记--CSS布局--float定位
1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <ht ...
- 前端学习笔记——CSS选择器
学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...
- 前端学习笔记 - Css初级篇
有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素 块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可 ...
- web前端学习笔记(CSS变化宽度布局)
一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...
- web前端学习笔记(CSS固定宽度布局)
一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml" ...
- web前端学习笔记(CSS盒子的定位)
相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它. 使用relat ...
- web前端学习笔记(CSS盒子的浮动)
在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. CSS中有一个float属性 ...
- 前端学习笔记--CSS布局--层定位
1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移 ...
- 前端学习笔记--CSS布局--文件流定位
1.概述 2.文档流定位:从上到下,从左到右 代码: <!DOCTYPE html> <html lang="en"> <head> <m ...
随机推荐
- SpringBoot系列教程web篇之Post请求参数解析姿势汇总
作为一个常年提供各种Http接口的后端而言,如何获取请求参数可以说是一项基本技能了,本篇为<190824-SpringBoot系列教程web篇之Get请求参数解析姿势汇总>之后的第二篇,对 ...
- 「模拟赛20191019」C 推式子+贪心+树状数组
题目描述 给定一棵\(n\)个点的有根树,根节点编号为\(1\),点有点权. 定义\(d(v)\)表示\(v\)到\(1\)的路径上的边数. 定义\(f(v,u)\)在\(v<u\)且\(v\) ...
- Apache Kafka主题 - 架构和分区
1.卡夫卡话题 在这篇Kafka文章中,我们将学习Kafka主题与Kafka Architecture的整体概念.Kafka中的体系结构包括复制,故障转移以及并行处理.此外,我们还将看到创建Kafka ...
- Django视图基类
Django视图基类 Django REST framwork 提供的视图的主要作用: 控制序列化器的执行(检验.保存.转换数据) 控制数据库查询的执行 一 .视图 REST framework 提供 ...
- Js学习02--变量、关键字、标识符
一.Js变量的定义 1.定义变量的目的 在内存中分配一块存储空间给变量,方便以后存储数据. 2.如何定义变量 任何变量在使用前都必须定义变量 var 变量名称 eg: var name,age,sex ...
- JVM运行时内存结构学习
学习JVM运行模型比较重要,先看一幅图片: 运行时数据区(内存结构) : 1.方法区(Method Area)类的所有字段和方法字节码,以及一些特殊方法如构造函数,接口代码也在这里定义.简单来说,所 ...
- [高清] Excel函数速记手册
------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...
- select ng-change 方法中 拿不到 ng-modal 定义的变量值
在使用angularjs框架的项目中,select 的数据源有两种绑定方式,在option中使用ng-repeat循环绑定,或者在select中使用ng-option 绑定. 无论哪种绑定方式,均要使 ...
- angularjs 动态加载指令------编译服务$compile
场景: 我们写了一个自定义的指令,这条指令需要一些数据,而这些数据需要在某些操作之后才能就绪,这时候,我们就需要在数据就绪之后,动态加载指令. 示例: js: $scope.$watch('repor ...
- 关于阿里 iconfont 的使用步骤
第一步: 在iconfont库中,找到你想要的图标,加入到购物车,再在购物车中将图标加入到你的项目中去 第二步: 在项目中,可以看到刚刚加入的图标,这里是你在项目中所有用到的iconfont,选 ...