HTML学习笔记Day2-头条页面案例

一、div样式布局

可以通过给div标签添加calss属性，来控制不同的div样式

 /*通过class属性值设置样式*/
  .left{
  width:20%;
  float:left;

  }

  .center{
  width:20%;
  float:left;
  
  }

  .right{
  width:20%;
  float:left;
  }



<div class = "left">leftdiv>
<div class = "center">centerdiv>
<div class = "right">rightdiv>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

属性：float浮动(left|right|none)、clear:清楚浮动(both)、text-align文本对齐方式(left|center|right)、background(背景颜色)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>今日头条案例title>
    <style>
      /*给div标签添加边框*/
      div{
        border:1px solid red;

      }

      .left{
        width:20%;
        float:left;
        height:500px;
      }

      .center{
         width:59%;
         float:left;
         height:500px;
      }

      .right{
         width:20%;
         float:left;
         height:500px;
      }

      /*底部超链接的div样式*/
      .footer{
        /*清除浮动的效果*/
        clear:both;
        text-align:center; /*文字居中的效果*/
        background:blue;
      }
    style>


head>
<body>
  
<div>topdiv>


<div>navibardiv>


<div class = "left">leftdiv>


<div class = "center">centerdiv>


<div class = "right">rightdiv>



<div class = "footer">footerdiv>

body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

二、图片标签

img:可以显示一张图片（本地或者网络）
src属性：这是一个必须的属性，表示图片的地址
title属性，鼠标悬停(hover)时显示文本
alt属性：图形不显示时替换的文本
height属性：图像的高度
width属性：图像的宽度

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签案例title>
head>
<body>
<img src = "../img/ad1.jpg"    title = "广告"  alt="图片找不到了" width = "300px" height = "300px"/>
body>
html>

1
2
3
4
5
6
7
8
9
10
11

三、超链接标签演示

在这里插入图片描述

超链接标签：
属性：
href-跳转的地址
target:跳转的方式（_self当前页面、_blank新标签页）
1
2
3
4

不光是文字可以做超链接图片也可以作为超链接

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接案例演示title>
    a{
      /*去掉超链接的下划线*/
      text-decoration:none;

      /*超链接的颜色*/
      color：black;
    }

  /*鼠标悬浮的样式控制*/
  a:hover{
    color:red;  
  }

head>
<body>

<a href = "http://www.baidu.com" target = "_self">友情链接a>
<br/>  

<a href = "http://www.baidu.com" target = "_self"><img src = "../img/itheima.png" width="150px" height = "50px"/>a>

body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

四、头条页面实现步骤

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>今日头条案例title>
    <style>
      /*给div标签添加边框*/
      div{
        border:1px solid red;

      }

      .left{
        width:20%;
        float:left;
      }

      .center{
         width:59%;
         float:left;
      }

      .right{
         width:20%;
         float:left;
      }

      /*底部超链接的div样式*/
      .footer{
        /*清除浮动的效果*/
        clear:both;
        text-align:center; /*文字居中的效果*/
        background:blue;
      }

      /*设置超链接样式*/
      a{
        color:white;
        text-decoration:none;

      }
    style>


head>
<body>
  
<div>
    <img  src = "../img/j1.png" width = 100%/>

div>


<div><img src = "../img/j2.png" width = "100%"/>div>


<div class = "left">
    <img src = "../img/j3.png" width = "100%"/>

div>


<div class = "center">
    
    <div>
        <p>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿⑴，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。p>
        <p>沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁⑵的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的p>
        
        <ol>
            <li>
                <b>采莲南塘秋b>
            li>
            <li><b>莲花过人头b>li>
            <li><b>低头弄莲子b>li>
            <li><b>莲子清如水b>li>

        ol>
        <img src="../img/1.png" width = "100%"/>
        <p>路上只我一个人，背着手踱⑶着。这一片天地好像是我的；我也像超出了平常的自己，到了另一个世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。p>


    div>div>


<div class = "right">

    <img src = "../img/ad1.jpg" width = ”100%/>
    <img src = "../img/ad2.jpg" width = ”100%/>
    <img src = "../img/ad3.jpg" width = ”100%/>

div>



<div class = "footer">
    <a href = "http://www.baidu.com" target = "_self">关于本文a>


div>


body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

相关阅读:
055-第三代软件开发-控制台输出彩虹日志
 TCP协议
 Jmeter 接口测试，参数值为列表，如何参数化？
C#图解教程(第三章)
tree命令详解（输出目录树层结构，显示目录和文件）
SpringCloud—-解决灾难性雪崩效应的方法之降级
 Verilog学习（1）
Linux——进程间通信——管道（文件）通信
 C语言time()函数的用法
 SATA系列专题之五：Link Power Management解析
原文地址：https://blog.csdn.net/qq_44653420/article/details/126843337