前端学习---day1(以百度搜索页面为例)

惊呆了老铁

已于 2024-09-13 23:11:02 修改

阅读量709

点赞数 17

文章标签：前端 html css

于 2024-09-13 23:10:00 首次发布

本文链接：https://blog.csdn.net/2201_75994908/article/details/142219355

版权

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>百度一下，你就知道</title>
   <style>
       body {  
           font-family: Arial, sans-serif;
           text-align: center;   
           margin-top: 2px;
       }<!---标签选择器--->
       ul.menu {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: white;
        }
 
        ul.menu li {
            float: left;
        }

        ul.menu li a {
            font-size: 12px;
            display: block;
            color: black;
            text-align: center;
            padding: 8px 10px;
            text-decoration: none;
        }
 
        ul.menu li a:hover {
            color: #4662d9;
        }
       .logo {
           margin-bottom: 20px;
       }
       .search-box {
           width: 500px;
           height: 35px;
           border: 2px solid#4e6ef2;
           padding: 0 10px;
           font-size: 16px;
           border-radius: 10px;
           outline: none;
       }
       .search-button {
           width: 100px;
           height: 38px;
           background-color: #4e6ef2;
           color: white;
           border: none;
           font-size: 16px;
           border-radius: 10px;
           cursor: pointer;
           margin-left: 2px;
       }
       .search-button:hover {
           background-color: #4662d9;
       }
       
   </style>
</head>
<body>
    <ul class="menu">
        <li><a href="https://news.baidu.com/">新闻</a></li>
        <li><a href="https://map.baidu.com/">地图</a></li>
        <li><a href="https://tieba.baidu.com/index.html">贴吧</a></li>
        <li><a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a></li>
        <li><a href="https://image.baidu.com/">图片</a></li>
        <li><a href="https://pan.baidu.com/">网盘</a></li>
        <li><a href="https://wenku.baidu.com/">文库</a></li>
        <li><a href="https://chat.baidu.com/">AI助手</a></li>
       </ul> 
   <div class="logo">
       <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度logo" width="240" height="120">
   </div>
   <div>
       <input type="text" class="search-box" placeholder="请输入搜索内容">
       <button class="search-button">百度一下</button>
   </div>
</body>
</html>

效果图

代码分析

CSS样式---字体

font-family:

用法：这里设置了两种字体类型（Arial,Helvetica都属于Sans_serif系列），建立后备机制

p{font-family:Arial,Helvetica,Serif;}

字体样式font-style

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
```
font-style:normal
font-style:italic
font-style:oblique
```

font-size

绝对大小和相对大小：

绝对大小直接用像素值设置；相对大小（1em=16px）比如：

font-size:2.5em 是40px

font-weight---字体粗细

取值范围：100~900
关键字
- normal(正常，默认值)
- lighter（较细）
- bold(较粗)
- bolder(很粗)

font-variant

noraml 正常
small-caps 以小型大写字母显示（以下是两种类型的区别）

文本（text）

对齐方式---text-align

居中对齐{text-align:center;}
左端对齐{text-align:left;}
右端对齐{text-align:right;}
两端对齐{text-align:justify;}

文本修饰

text-decoration属性用来设置或删除文本的装饰。

删除链接的下划线

a{text-decoration:none;}

装饰文字

 <style>
     h1{text-decoration:overline;}  /*上划线*/
     h2{text-decoration:underline;} /*下划线*/
     h3{text-decoration:line-through;} /*删除线*/
 </style>
 <body>
     <h1>标题1</h1>
     <h2>标题2</h2>
     <h3>标题3</h3>
 </body>