css(9)

学习目标

能够使用ps进行基本的切图

能够完成项目基本目录搭建

能够完成品优购头部

能够完成品优购导航

能够设置盒子的边框圆角

。。。。。。

边框圆角

可以使用边框圆角画一个圆（画一个小圆点）

border:边框     radius：半径
border-radius: 5px; 四个都设, 一样大
border-radius: 5px 15px 25px 35px; 左上、右上、右下、左下

注意点：

1. border-radius的值指的是边框的圆角半径
2. border-radius与margin类似，可以分别指定4个圆角的大小（左上、右上、右下、左下）
3. 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图标

使用步骤：

1. 获取一个.ico的图片
   • 一般是由UI设计师提供.ico图片
   • 或者可以通过网站（http://www.bitbug.net/）将图片上传，获取ico图标
2. 使用代码 <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文件：

• 先引入初始化的样式，再引入单独的样式（因为单独的样式有时候需要覆盖初始化的样式）