HTML5 - DIV+CSS完成首页布局

1.HTML的块标签

  • : 默认一个DIV独占一行
  • :默认在同一行

    1.1CSS的概述

  • 层叠样式表

  • 美化HTML
  • HTML相当于网站的骨架
  • CSS对骨架进行美化

    1.1.1CSS的基础语法
  • CSS的基本语法通常包含两个部分:一个是选择器,一个声明。

  • 选择器{属性:属性值;属性:属性值。。。}
  • CSS的引入方式

    1. 行内样式:直接在HTML的元素上使用style属性的css。

      Title

    2. 页面内样式:在HTML的标签中,
 <style>
            h1{
                color: red;
                font-size: larger;
            }
        style>
        <h1>TITLE1h1>
3. 外部样式:单独顶一个.css文件
  

1.2CSS的选择器

  1. 元素选择器
<style>
            div{
                border: 1px solid blue;
                width: 40px;
                height: 45px;
            }
        style>
  1. ID选择器
    #d1{
                border: 2px solid orange;
                width: 30px;
                height: 55px;
            }
        style>
    head>
    <body>
        <div id="d1">DIV1div>

3.类选择器

.divClass{
                border: 2px solid paleturquoise;
            }

<div class="divClass">DIV4div>
<div class="divClass">DIV5div>

4.CSS的浮动
Float属性的取值:
Left:
Right:
清除浮动效果:使用Clear效果

<style>
            div{
                border: 1px solid blueviolet;
                width: 200px;
                height: 220px;
            }
            #d1{
                float: right;
            }
            #d2{
                float: right;
            }
            #d3{
                float: right;
            }
            .clear{
                clear: both;
            }


        style>
    head>
    <body>
        <div id = "d1">DIV1div>
        <div id = "d2">DIV2div>
        <div id = "d3">DIV3div>
        <div class="clear"> div>
        <div id = "d4">DIV4div>

5.CSS的其他选择器
属性选择器:

<style>
            input[type = "text"]{
                background-color: red;
            }
        style>

6.CSS样式总结

  1. 背景
  2. 文本
  3. 字体
  4. 列表
    ####1.7CSS的伪类
    a:link{color:#FF0000}
    a:visited{color:#00FF00}
    a:hover{color:#FF00FF}
    a:active{color:#0000FF}

你可能感兴趣的:(html5)