重学前端基础-CSDN博客

本文链接：https://blog.csdn.net/weixin_49393290/article/details/126700575

如果您想立马看到代码效果，您可以使用这个网站工具来查看

https://codepen.io/

1/HTML

这个网址里有所有的html标签含义

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML

<p>Lorem+n(数字)</p> 按回车之后会随机生成您输入的数字那么多的单词

使用chrome和vs code搭配开发在mac环境下做demo

首先在桌面新建一个文件夹

2/CSS

想改变标题颜色有以下几种方法

方法一：

<!DOCTYPE html>
<head>
<style>
    h1{
        color:aqua;
    }
</style>
</head>
<body>
    <h1>one</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum nihil quasi sit quod tempore magni quos dolorem voluptates. Itaque incidunt a magni iure in beatae, tempora obcaecati! Ipsum, architecto nulla. Esse illum, accusantium ex et ratione fugit, voluptas consequatur architecto enim harum sequi nam ducimus recusandae expedita ipsam nisi, aliquid natus quae dolorem? Temporibus numquam iste perspiciatis, repellendus laboriosam sunt optio commodi quae aspernatur laudantium illo magni quibusdam natus exercitationem eligendi doloremque deleniti. Cumque libero id illum consectetur quisquam nihil dolore, reiciendis quidem voluptatibus pariatur nam ratione! Molestias ratione explicabo necessitatibus repellat alias quo harum, in nostrum nemo? Facere, omnis.</p>
    
</body>
</html>

方法二：内联样式

<body>
    <h1 style="color:red">one</h1>
 
    
</body>

以上两种方法都不推荐，使用第三种方法

然后您在index.html中引入一下

这里要注意如果您在css文件中直接调试原生标签，就直接引用标签名而不要加.号

而如果您是用class取名的盒子，则需要加.号

此处推荐这个学习css的网站可以多看这个网站有很多伪类选择器的方法

CSS selectors - Learn web development | MDN

此处有两个网站

一、颜色网站

<color> - CSS: Cascading Style Sheets | MDN

二、把颜色值转换成十六进制的网站

HSL to RGB | RGB to HSL | Colour Calculator | Hex Color Converter

一些属性的效果

body{
    background-color: rgb(34, 104, 255);
    font-family: Arial, Helvetica, sans-serif;/*字体*/
    font-size:16px;/*字体大小*/
    font-weight: bold;/*字重*/
    /*您也可以把以上三行简化成
    font:normal 16px Arial,Helvetica,sans-serif;
    */
    line-height: 2em;/*每一行之间的距离，又称行高*/
}
h1{
    background-color: antiquewhite;/*在h1盒子字体背景颜色*/
    color:blue;/*字体颜色*/
}

/*如果您想要修改box1盒子里的h1标签的样式*/
.box1 h1{
    font-family: 'Times New Roman', Times, serif;
    font-weight: 800;
    font-style:italic;/*字体样式比如斜体*/
    text-decoration:underline;/*下划线*/
    text-transform:uppercase;/*全部大写*/
    letter-spacing: 1em;/*字母之间的间距*/
    word-spacing:2em;/*单词间距*/

}
.box1{
    border:5px blue solid;/*solid是这个边框加粗的效果*/
    border-right:5px red solid;
    border-left:8px blue solid;
    border-top:10px green dotted;/*dotted是隔点的效果*/
    border-bottom:1px firebrick double;/*double让线条稍微粗一些*/
    border-bottom-width:8px;/*b边框变宽了*/
    border-bottom-style:dashed;/*也是改变样式的*/
    border-radius:35px;/*设置边框为圆角*/
}

.container{
    width:50%;/*这是文字占屏幕的面积*/
    margin:auto;/*让盒子在屏幕居中显示*/
}

如果您写列表标签

  <div class="list">
       <ul>
         /*这里快捷方式“li*n(n指数字)快速创建标签”*/  
           <li>list 1</li>
           <li>list 2</li>
           <li>list 3</li>
           <li>list 4</li>
           <li>list 5</li>
       </ul>>

   </div>

将网络图片下载到本地之后修改图片的长宽度

再到工作台新建image文件夹，把压缩后的图片拖拽到image文件夹里

然后在css里写属性

.list li{
    /*因为image也是一个文件夹且未引用所以需要用两个..号*/
    list-style-image:url('../image/dui.jpg');

}

一个按钮

<body> 
<button>button</button>
</body>

关于按钮可以有的css

button{
    width:50px;
    height:20px;
    background-color: #4444;
    color:#ffff;
}
/*鼠标放到按钮上时变化的颜色*/
button:hover{
    background-color: red;
}
/*鼠标点击按钮时变化的颜色*/
button:active{
    background-color: #fff;
}

超链接的一些css

html部分

  <div class="list">
       <ul>
           <li><a href="#">list 1</a></li>
           <li><a href="#">list 2</a></li>
           <li><a href="#">list 3</a></li>
           <li><a href="#">list 4</a></li>
           <li><a href="#">list 5</a><li>
       </ul>

   </div>

css部分

a{
    text-decoration:none;/*不想要下划线*/
    color:#555555;
}
/*超链接被点击的时候颜色*/
a:hover{
    color:cyan;
}
/*超链接被点击之后会变的颜色*/
a:visited{
color:red;
}

页面盒子呈三边和两边显示

html部分

 <div class="block">
       
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, similique ad, libero assumenda magnam blanditiis ut quibusdam laudantium exercitationem error sequi corrupti. Labore at, ipsa reiciendis eius excepturi temporibus ratione error deserunt natus neque possimus sit cupiditate provident perspiciatis libero consequuntur consequatur cumque adipisci delectus explicabo a vero illo repellendus. Maxime quo ea non pariatur? Dicta quisquam facilis rerum atque, corporis eveniet maxime a reprehenderit, iure animi iusto saepe officia asperiores accusantium consequuntur assumenda neque maiores illo reiciendis quam eius veritatis. Rem possimus asperiores placeat optio repellat cumque. Unde atque dicta sint eaque vitae optio enim aliquam cupiditate deleniti odit!</p>

   </div>
   <div class="block">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, similique ad, libero assumenda magnam blanditiis ut quibusdam laudantium exercitationem error sequi corrupti. Labore at, ipsa reiciendis eius excepturi temporibus ratione error deserunt natus neque possimus sit cupiditate provident perspiciatis libero consequuntur consequatur cumque adipisci delectus explicabo a vero illo repellendus. Maxime quo ea non pariatur? Dicta quisquam facilis rerum atque, corporis eveniet maxime a reprehenderit, iure animi iusto saepe officia asperiores accusantium consequuntur assumenda neque maiores illo reiciendis quam eius veritatis. Rem possimus asperiores placeat optio repellat cumque. Unde atque dicta sint eaque vitae optio enim aliquam cupiditate deleniti odit!</p>

</div>
<div class="block">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, similique ad, libero assumenda magnam blanditiis ut quibusdam laudantium exercitationem error sequi corrupti. Labore at, ipsa reiciendis eius excepturi temporibus ratione error deserunt natus neque possimus sit cupiditate provident perspiciatis libero consequuntur consequatur cumque adipisci delectus explicabo a vero illo repellendus. Maxime quo ea non pariatur? Dicta quisquam facilis rerum atque, corporis eveniet maxime a reprehenderit, iure animi iusto saepe officia asperiores accusantium consequuntur assumenda neque maiores illo reiciendis quam eius veritatis. Rem possimus asperiores placeat optio repellat cumque. Unde atque dicta sint eaque vitae optio enim aliquam cupiditate deleniti odit!</p>

</div>
<div class="clearfix"></div>
<div id="main-block">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse nemo, tempora praesentium autem, rem deleniti, cumque cupiditate animi beatae accusamus dolorum reiciendis laborum omnis ad suscipit sit! Quas accusantium libero nostrum sed molestiae deserunt beatae impedit voluptates. Eius eos unde magnam nobis. Numquam temporibus omnis sint dolores, voluptatem fuga ipsum fugit non nihil voluptas, quod molestias impedit placeat sunt totam vitae! Animi, reprehenderit atque deserunt illum saepe tenetur sed ullam. Atque suscipit alias voluptas pariatur cum sit debitis explicabo. Dolore accusamus quo a, quod recusandae consectetur quaerat voluptate pariatur ullam! Eaque aperiam non temporibus! Quibusdam animi itaque quo. Ipsam, minus.</p>
</div>
<div id="sidebar">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse nemo, tempora praesentium autem, rem deleniti, cumque cupiditate animi beatae accusamus dolorum reiciendis laborum omnis ad suscipit sit! Quas accusantium libero nostrum sed molestiae deserunt beatae impedit voluptates. Eius eos unde magnam nobis. Numquam temporibus omnis sint dolores, voluptatem fuga ipsum fugit non nihil voluptas, quod molestias impedit placeat sunt totam vitae! Animi, reprehenderit atque deserunt illum saepe tenetur sed ullam. Atque suscipit alias voluptas pariatur cum sit debitis explicabo. Dolore accusamus quo a, quod recusandae consectetur quaerat voluptate pariatur ullam! Eaque aperiam non temporibus! Quibusdam animi itaque quo. Ipsam, minus.</p>
</div>
<div class="clearfix"></div>

css部分

.block{
    float:right;/*让三段内容浮动展示*/
    width:33.3%;/*因为是三块，想让他们同行展示，/3就是33.3*/
    border:1px solid #ccc;
    box-sizing:border-box;/*这个是说明此处有比边框，并且不占据屏幕宽度*/
}
.clearfix{
clear:both;/*清除上下区域块的float浮动*/
}
/*您想要两个盒子左右浮动显示*/
#main-block{
    float:left;
    width:70%;
    border:1px solid #ccc;
    box-sizing:border-box;
}
#sidebar{
    float:right;
    width:30%;
    border:1px solid #ccc;
    box-sizing:border-box;
}

使用position的relative定位后有些微变化，它就会在它在的那一块原地进行偏移

代码:

.box1{
   
    position:relative;
    top:30px;
    left:30px;
}

然后我们先写一个盒子

 <div class="position-box">
      <h1>heading</h1>
      <h2>heading</h2>
      </div>

.position-box{
    width:500px;
    height:500px;
    border:1px solid black;
}

您想在让元素在盒子内部浮动的话，您就需要在外侧标签加position：relative

如果不加这行代码的话，就会从整个页面的上部开始浮动。

.position-box{
    width:500px;
    height:500px;
    border:1px solid black;
    position:relative;
}
.position-box h1{
    position:absolute;
    top:50px;
}
.position-box h2{
    position:absolute;
    right:30px;
}

如果你想要一个按钮固定在页面不动的话

html部分

 <button id="fixed">button</button>

css：

 #fixed{
    position:fixed;
    right:0;
    bottom:0;
}

。