学习目标
能够使用ps进行基本的切图
能够完成项目基本目录搭建
能够完成品优购头部
能够完成品优购导航
能够设置盒子的边框圆角
。。。。。。
边框圆角
可以使用边框圆角画一个圆(画一个小圆点)
border:边框 radius:半径
border-radius: 5px; 四个都设, 一样大
border-radius: 5px 15px 25px 35px; 左上、右上、右下、左下
注意点:
- border-radius的值指的是边框的圆角半径
- border-radius与margin类似,可以分别指定4个圆角的大小(左上、右上、右下、左下)
- border-radius的值可以是px,也可以是百分比
特殊情况:盒子为正方形,设置border-radius: 50%为一个圆
input和textarea 的处理
清除input的轮廓
/* 一眼就能看见的样式(清除默认的外部边框) */
border: none;
/* 清除输入时候的外边框 */
outline-style: none;
设置禁止textarea自由缩放
resize: none;
盒子宽高的百分比设置
如果需要一个父盒子中的四个子盒子,宽度为父盒子的四分之一,高度为父盒子的高度,怎么去完成?
- 可以直接设置数值(自己计算)
- 可以直接设置百分比(百分比相对于父盒子的宽高,让浏览器去计算)
项目搭建
步骤:
-
项目文件夹:一个项目就是一个文件夹,把所有项目相关的文件都放在这个文件夹中
-
css文件夹:大项目中专门用于存放css文件
-
初始化的css文件:单独将初始化的css代码写在一个文件中,比如base.css
ヾ(๑╹◡╹)ノ"查看base.css的代码
为什么要用css初始化,并举例说明?(考题) 因为每个浏览器有自己不同解析标签的方式:为了能够让不同的浏览器显示的页面效果是一样的,我们需要清除浏览器的默认样式,自己设置每个标签的样式。 举例说明: 1.清除标签的默认margin和padding: * { margin: 0; padding: 0; } 2.清除li标签之前的小点: ul{ list-style: none; } 3.清除浮动: .clearfix::after { content: ""; display: block; clear: both; height: 0; line-height: 0; visibility: hidden; } 4.清除a的下划线: a { text-decoration:none; } 5.......(base.css中有一堆)
-
公共的css文件:很多页面中公共的样式可以放在一个文件中,比如common.css
-
每个网页对应的css文件:每个页面不同的css文件,比如index.css
-
-
images文件夹:专门用于存放项目中的图片
-
首页:index.html
-
ico图标的使用
较大的网站的title前面会有一个小的图标,就是ico图标
使用步骤:
- 获取一个.ico的图片
- 一般是由UI设计师提供.ico图片
- 或者可以通过网站(http://www.bitbug.net/)将图片上传,获取ico图标
- 使用代码
<link rel="shortcut icon" href=" favicon.ico的路径">
(注意路径:建议将ico图标放到根目录下面)
网页seo三大标签(了解)
实际开发中提高网页seo的方法(基础班了解即可)
网页的title标签
title具有不可替代性,是我们的网页第一个重要标签,是搜索引擎了解网页的入口,和对网页主题归属的最佳判断点。
首页建议:网站名(产品名)- 网站的介绍
例如:
品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物!
京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!
Description标签
针对网站的描述,是标题的一个补充,可以较为详细,一般不超过120个字,作用相对次之
<meta name="description" content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!" />
Keywords关键字
搜索引擎的关注点之一
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
项目开始
引入css文件:
- 先引入初始化的样式,再引入单独的样式(因为单独的样式有时候需要覆盖初始化的样式)