前端学习第二天

    xiaoxiao2022-07-13  160

    用心记录点滴学习

    div标签 div标签是没有语义的,它是一个容器标签 嵌套标签,布局使用的较多。 div里面可以放div,也可以放其他标签。 div是没有默认间距的,div,h,p,br,都是属于块元素。

    <div></div> <div> <div> <div><div> </div> </div>

    div布局原理:先布局后整理 ,先行后列。 推荐使用div

    <div> <h3>今日头条</h3> <a href="#">更多>></a> </div> <div> <img src="img/t6.jpg" alt="这是一个圣诞树" width="300px"> </div> <div style="color:red;font-size:10px" > <p>《水浒传》是中国历史上第一部用古白话文写成的歌颂农民起义的长篇章回体版块结构小说,以宋江领导的起义军为主要题材,通过一系列梁山英雄反抗压迫、英勇斗争的生动故事,暴露了北宋末年统治阶级的腐朽和残暴,揭露了当时尖锐对立的社会矛盾和“官逼民反”的残酷现实。</p> </div>

    span标签 span标签:跨度,跨距,范围,一行可以写好多个span,它也是用来布局用的。

    <span></span>

    像一段文字中间有字需要改变颜色,字体 ,文字大小时就可以使用span标签,从而改变文字的颜色 大小等。

    <div> 我就是我<span style="color:red;font-size:100px";>颜色</span>不一样的烟火 </div>

    文字注释 注释就是解释说明的,网页上是看不到的,给一个段落解释说明的。

    <---里面是解释文本内容--->

    **

    选择器 重点

    ** 1.标签选择器 标签选择器:直接写标签名,所有的同类标签都会变化,不满足单个变化。 一般不怎么使用。 在标签里面直接写:style=“background:背景颜色 width:宽度 color:颜色” 都可以写。

    <div style="background: yellow;width :200px;"> <div>这是一个div标签</div> <div>这是一个div标签</div> <div>这是一个div标签</div> <div>这是一个div标签</div> </div>

    2.类选择器 使用最多的一个选择器, 必须要在style里面写,.+类名 在标签里加一个class=“标签名称”。 style要也到hade里面,

    <style> .blue{ color: blue; font-size: 100px; } .red{ color: red; font-size: 100px; } .orange{ color: orange; font-size: 100px; } .green{ color: green; font-size: 100px; } .box{ width: 300px; height: 300px; border: 10px solid red; border-bottom: 10px solid yellow; border-left: 10px solid blue; border-top: 10px solid red; border-right: 10px solid cyan; } </style> <body> <div> <span class="blue">G</span> <span class="red">o</span> <span class="orange">o</span> <span class="blue">g</span> <span class="green">L</span> <span class="red">e</span> </div> <div class="box"></div> </body>

    3.层级选择器 层级选择器就是改变同一行下一级的样式; 用span包裹需要改变的字,

    <style> .red { color: yellow; } .box{ color: red; } </style> <h3 class="yellow">你就是童话里<span class=“red” >最美</span>的天使</h3>

    css样式:重点 1.行内样式,她与标签选择器用法是一样的,使用的也比较少。

    <div style="background: yellow;width :200px;"> <div>这是一个div标签</div> <div>这是一个div标签</div> <div>这是一个div标签</div> <div>这是一个div标签</div> </div>

    2.内嵌样式 内嵌样式:一定要写style 一般写在head里面。部分推荐使用。网页首页可以用这个方式。

    <style> p{ color: pink; font-size: 20px; background: blue; width: 20px; } </style> <p>颜色不一样的烟火</p>

    3.外链样式 外链样式:首先需要创建一个css的文件,然后在hade里面写下格式: link rel=“stylesheet” href=“文件名字”。 记住在css里面不用写标签,

    <link rel="stylesheet" href="文件名字"> <h3>捕捉一个高冷月</h3> h3{ color: red; background: yellow; }

    四周边框的写法

    border: 10px solid red;

    上下左右边边框的写法

    <!-- 下边框 --> border-bottom: 10px solid yellow; <!-- 左边框 --> border-left: 10px solid blue; <!-- 右边框 --> border-top: 10px solid red; <!-- 上边框 --> border-right: 10px solid cyan;

    宽度,高度,文字,颜色,背景颜色的写法

    <!-- 宽度 --> width: 300px; <!-- 高度 --> height: 300px; <!-- 文字 --> font-size: 100px; <!-- 颜色 --> color: pink; <!-- 背景颜色 --> background: blue;

    alt src的语义,用法 alt属性 图片加载失败 会显示alt里面的文字 src 图片地址

    <img src="" alt="">
    最新回复(0)