前端攻城狮

css-note

2018-07-21  本文已影响1人  TinyTank

css学习内容

学习css的好处

第一二章 css3基础语法

css样式规则

css规则由两部分组成：选择器、声明

h1 选择器

{color:red;font-size:14px;} 声明

css引用

写在<head></head>标签内：

<style type="text/css">

css样式

</style>

注意：

css注释

如何引用css样式

注意：

css使用方法优先级（可添加!important规则调整为最高级）

行内样式（全值为1000） > 内部样式 > 外部样式

遵循就近原则

css选择器

css选择器分类

注意：

伪类

链接伪类的4种状态：

激活状态(a:active)、已访问状态(a:visited)、未访问状态(a:link)、鼠标悬停状态(a:hover)。

链接伪类的顺序:

:link > :visited > :hover > :active

  • a:hover必须置于a:link和a:visited之后才有效
  • a:active必须置于a:hover之后才有效
  • 伪类名称对大小写不敏感

注意：

  • 伪类：hover和：active不单单用于a元素
  • 伪类：hover和：active兼容 IE6及更早版本，支持<a>元素的4种状态；
  • IE6浏览器不支持其它元素的：hover和：active。

css文本样式

相对单位

属性值 说明
in Inch,英寸
cm 厘米
mm 毫米
pt Point,印刷的点数
pc Pica,1pc=12pt
属性值 css2缩放系数1.2
XX-small 9px
X-small 11px
small 13px
medium 16px
large 19px
X-large 23px
XX-large 28px

css背景和列表

背景样式

说明:

1、transparent是全透明黑色（black）的速记法，类似rgba(0，0，0，0）这样的值；

2、颜色值（颜色名/RGB/十六进制）；

3、背景区包括内容、内边距（padding）和边框(记得设置边框样式为虚线还是直线，还有设置边框颜色，否则默认与文本颜色相同），不包含外边距（margin）。

说明：

1、元素的背景占据了元素的全部尺寸（包括内边距和边框，不包括外边距）；

2、默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

说明：

scroll：默认值，背景图片随滚动条滚动

fixed：当页面的其余部分滚动时，背景图片不会移动

说明： 各值之间用空格隔开，不分先后顺序

例如：background:repeat red left scroll

列表样式

无序列表：
none: 无标记
disc: 实心的圆点
circle: 空心的圆点
square: 实心的方块
有序列表：
none: 无标记
decimal: 从1开始的整数
lower-roman: 小写罗马数字
upper-roman: 大写罗马数字
lower-alpha: 小写英文字母
upper-alpha: 大写英文字母

说明：

inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐

outside：默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐

说明：
1、各值之间用空格隔开
2、不分先后顺序
3、list-style-image会覆盖list-style-type的设置
例如：list-style:disc inside

css盒子模型

学习内容

盒子模型的概念

盒子模型属性

块级元素：
<p> <div> <h1>~<h6> <ul> <li> <ol> <dl> <dt> <dd>等

替换元素：
浏览器根据其标签的元素与属性来判断显示的具体内容，如<img> <input> <textarea>等

盒子模型的计算

盒子模型的应用

HTML元素分类

块级元素，独占一行
如<p> <div> <h1>~<h6> <ul> <li> <ol> <dl> <dt> <dd>等

行内元素（内联元素），一行显示，直到该行排满之后，再到下一行
如<span> <a> <em>等

注意：

1、相应内联元素及使用display：inline设置成内联元素的元素width和height属性无效；
水平方向margin-left/margin-right/padding-left/padding-right有效；
垂直方向magin-top/margin-bottom/padding-left/padding-right无效；

2、块级元素及使用display：block设置成块级元素的元素width / height / margin / padding属性都生效。

css中的float浮动

float中的四个参数

浮动副作用的解决

clear属性

  • clear: none 不清除浮动
  • clear: left 清除左侧浮动
  • clear: right 清除右侧浮动
  • clear: both 清除两边浮动

css定位

HTML中的三种布局方式

position属性的意义

position中的可选参数

z-index（只作用于带有定位属性的元素）

css网页布局

认识布局

学习内容

经典的行布局

  • margin: 0 auto; (上下为0，左右居中）
  • width: 100%;（页面自适应）
  • position: absolute; left:50%; top:50%; margin-left: -50% width; margin-top: -50% height; (垂直、水平都居中）

经典的列布局

混合布局

圣杯布局

流程方式
<div class = "container">
  <div> 中间 </div>
  <div> 左侧 </div>
  <div> 右侧 </div>
</div>
布局要求

双飞翼布局

流程方式
<div class = "main">
  <div> 中间 </div>
</div>
  <div> 左侧 </div>
  <div> 右侧 </div>

css网页布局案例

需要具备的基础

css网页布局案例操练

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title> css网页布局 </title>
  <link rel="stylesheet" href="index.css" />
</head>
<body>
  <!-- 头部 -->
  <div class="header">
      <div class="logo">
          <img src="image/logo.png" alt="logo" />
      </div>
      <div class="nav">
          <ul> 
              <li> 首页 </li>
              <li> 图片 </li>
              <li> 视频 </li>
              <li> 手记 </li>
          </ul>
      </div>  
  </div>
  <!-- 主体 -->
  <div class="main">
      <div class="top">
          <img src="image/1.jpeg" />
      </div>
      <!-- 遮罩层 -->
      <div class="topLayer">
        <div class="topLayer-top">
          <div class="word"> MY BEAUTIFUL LIFE </div>
          <button> LOOK MORE &gt; </button>
        </div>
      </div>
      <div class="middle">
        <div class="m-top">
            <div class="common">
                <img src="image/weibo.png" />
                <div class="comm"> MICROBLOG </div>
            </div>
            <div class="common">
                <img src="image/weixin.png" />
                <div class="comm"> WECHAT </div>
            </div>
            <div class="common">
                <img src="image/QQ.png" />
                <div class="comm"> QQ </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="m-middle">
            "I want to give good things to record down,<br/>after the recall will be very beautiful."
        </div>
        <div class="m-bottom">
            <div class="m-com">
                <img src="image/03-01.jpg" />
                <div class="des1"> Cool Image </div>
                <div class="des2"> Record The Picture </div>
            </div>
            <div class="m-com">
                <img src="image/03-02.jpg" />
                <div class="des1"> Cool Image </div>
                <div class="des2"> Record The Picture </div>
            </div>
            <div class="m-com">
                <img src="image/03-03.jpg" />
                <div class="des1"> Cool Image </div>
                <div class="des2"> Record The Picture </div>
            </div>
        </div>
      </div>
      <div class="clear"></div>
      <div class="bottom">
        <div class="content">
          <div class="title">
              FROM THE PHOTO ALBUM
          </div>
          <div class="pic-content">
              <dl>
                  <dt><img src="image/04-01.jpg" /></dt>
                  <dd class="word"> Life is like a book, just read more and more refined, more write more carefully. When read, mond open, all things have been indifferent to heart. Life is the precipitation. </dd>
              </dl>
              <dl>
                  <dt><img src="image/04-02.jpg" /></dt>
                  <dd class="word"> Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more. </dd>
              </dl>
          </div>
          <div class="clear"></div>
        </div>
      </div>
  </div>
  <!-- 底部 -->
  <div class="footer">
      <div class="word"> 我是有底线的 </div>
  </div>
  
</body>
</html>

index.css 如下：

*{
    padding: 0;
    margin: 0;
}
.header{
    width: 100%;
    height: 100px;
    background-color: #eee; 
}
.header img{
    width: 300px;
    height: 85px;
    padding-left: 100px;
    padding-top: 8px;
}
.header .logo{
    float: left;
}
.header .nav{
    float: right;
}
.header .nav ul{
    padding-right: 100px;
}
.header .nav ul li{
    float: left;
    list-style: none;
    width: 80px;
    height: 100px;
    line-height: 100px;
    font-size: 15px;
    font-weight: bolder;
    color: #7D7D7D;
}
.main .top{
    width: 100%;
    height: 600px;
}
.main .top img{
    width: 100%;
    height: 600px;
}
.main .topLayer{
    position: absolute;
    top: 100px;
    left: 0;
    background-color: #000; 
    width: 100%;
    height: 600px;
    opacity: 0.5;
}
.main .topLayer-top{
    width: 500px;
    height: 300px;
    position: absolute;
    top: 400px;
    margin-top: -150px;
    z-index: 2;
    right: 50%;
    margin-right: -250px;
}
.main .topLayer-top .word{
    padding-top: 100px;
    color: #fff;
    font-size: 45px;
    font-weight: bolder;
    text-align: center;
    font-family: 微软雅黑;
}
.main .topLayer-top button{
    width: 200px;
    height: 60px;
    margin-top: 50px;
    color: #fff;
    background-color: #F5704F;
    font-family: 微软雅黑;
    text-align: center;
    font-size: 14px;
    font-weight: bolder;
    border-radius: 8px;
    /* 圆角 */
    clear: both;
    margin-left: 150px;
}
.main .middle{
    width: 1000px;
    margin: 0 auto;
}
.main .middle .m-top .common{
    float: left;
    padding-top: 50px;
    width: 33.3%;
    text-align: center;
}
.main .middle .m-top .common img{
    width: 100px;
    height: 100px;
}
.main .middle .m-top .common .comm{
    font-size: 20px;
    color: #7D7C7F;
    font-weight: bold;
    padding-top: 20px;
}
.main .middle .m-middle{
    font-size: 22px;
    color: #E19796;
    font-weight: bold;
    padding-top: 50px;
    font-style: italic;
    text-align: center;
    padding-bottom: 50px;
}
.clear{
    clear: both;
}
.main .middle .m-bottom .m-com{
    float: left;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}
.main .middle .m-bottom .m-com img{
    width: 310px;
    height: 260px;
}
.main .middle .m-bottom .m-com .des1{
    color: #7D7D7F;
    padding-top: 20px;
}
.main .middle .m-bottom .m-com .des2{
    color: #BDBDBC;
    padding-top: 10px;
}
.main .bottom{
    background-color: #F9F9F9;
}
.main .bottom .content{
    width: 1000px;
    margin: 0 auto;
}
.main .bottom .content .title{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #7D7C7F;
    font-family: 微软雅黑;
    padding-top: 50px;
    padding-bottom: 50px;
}
.main .bottom .content .pic-content dl{
    float: left;
    width: 470px;
    margin: 10px 12px;
}
.main .bottom .content .pic-content dl img{
    width: 470px;
    height: 460px;
}
.main .bottom .content .pic-content dl .word{
    font-size: 20px;
    padding-top: 20px;
    font-weight: bold;
    color: #7D7C7F;
    padding-bottom: 50px;
}
.footer{
    background-color: #eee;
    width: 100%;
    height: 100px;
}
.footer .word{
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    font-family: 微软雅黑;
    color: gray;
    line-height: 100px;
}
上一篇 下一篇

猜你喜欢

热点阅读