html基础知识
1、文字阴影代码：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>文字阴影</title>
? ? <style>
? ? ? ? div {
? ? ? ? ? ? font-size: 50px;
? ? ? ? ? ? color: blue;
? ? ? ? ? ? font-weight: 700;
? ? ? ? ? ? text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
? ? ? ? }
? ? </style>
</head>
<body>
? ? <div>
? ? ? ? Hellow World
? ? </div>
</body>
</html>
效果图：
2、有序列表的理解
代码：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>有序列表</title>
? ? <style>
? ? ? ? body {
? ? ? ? ? ? font-family: "Arial, sans-serif";
? ? ? ? ? ? background-color: #f4f4f4;
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? h1 {
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? margin-top: 20px;
? ? ? ? }
? ? ? ? ul {
? ? ? ? ? ? list-style-type: none;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? text-align: center;
? ? ? ? }
? ? ? ? li {
? ? ? ? ? ? background-color: #fff;
? ? ? ? ? ? box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
? ? ? ? ? ? border-radius: 5px;
? ? ? ? ? ? margin: 10px;
? ? ? ? ? ? padding: 10px;
? ? ? ? ? ? display: inline-block;
? ? ? ? }
? ? ? ? dd {
? ? ? ? ? ? margin: 5px 0;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <h1>销量排行榜</h1>
? ? <ul>
? ? ? ? <li>
? ? ? ? ? ? <dd>地区: 北京</dd>
? ? ? ? ? ? <dd>性别: 男</dd>
? ? ? ? ? ? <dd>年龄: 30</dd>
? ? ? ? ? ? <dd>学历: 本科</dd>
? ? ? ? ? ? <dd>单位: 公司A</dd>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? <dd>地区: 上海</dd>
? ? ? ? ? ? <dd>性别: 女</dd>
? ? ? ? ? ? <dd>年龄: 25</dd>
? ? ? ? ? ? <dd>学历: 硕士</dd>
? ? ? ? ? ? <dd>单位: 公司B</dd>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? <dd>地区: 广州</dd>
? ? ? ? ? ? <dd>性别: 男</dd>
? ? ? ? ? ? <dd>年龄: 35</dd>
? ? ? ? ? ? <dd>学历: 大专</dd>
? ? ? ? ? ? <dd>单位: 公司C</dd>
? ? ? ? </li>
? ? </ul>
</body>
</html>
效果图：
3、表格
代码：
<!DOCTYPE html>
<html lang="en">
<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";
? ? ? ? ? ? background-color: #f4f4f4;
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? background-size: cover;
? ? ? ? }
? ? ? ? h1 {
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? color: #333;
? ? ? ? ? ? text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
? ? ? ? ? ? padding-top: 20px;
? ? ? ? }
? ? ? ? ul {
? ? ? ? ? ? list-style-type: none;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 20px auto;
? ? ? ? ? ? width: 50%;
? ? ? ? ? ? background-color: rgba(255, 255, 255, 0.8);
? ? ? ? ? ? box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
? ? ? ? ? ? border-radius: 10px;
? ? ? ? }
? ? ? ? li {
? ? ? ? ? ? padding: 10px;
? ? ? ? ? ? border-bottom: 1px solid #eee;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? justify-content: space-between;
? ? ? ? ? ? transition: background-color 0.3s ease;
? ? ? ? }
? ? ? ? li:last-child {
? ? ? ? ? ? border-bottom: none;
? ? ? ? }
? ? ? ? dd {
? ? ? ? ? ? font-weight: bold;
? ? ? ? }
? ? ? ? li:hover {
? ? ? ? ? ? background-color: #f9f9f9;
? ? ? ? }
? ? ? ? input {
? ? ? ? ? ? margin: 10px 20px;
? ? ? ? ? ? padding: 5px;
? ? ? ? ? ? border-radius: 5px;
? ? ? ? ? ? border: 1px solid #ccc;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <h1>销量排行榜</h1>
? ? <input type="text" id="searchInput" οnkeyup="search()" placeholder="输入关键词进行筛选">
? ? <ul id="salesList">
? ? ? ? <li>
? ? ? ? ? ? <dd>地区</dd>
? ? ? ? ? ? <dd>性别</dd>
? ? ? ? ? ? <dd>年龄</dd>
? ? ? ? ? ? <dd>学历</dd>
? ? ? ? ? ? <dd>单位</dd>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? <dd>北京</dd>
? ? ? ? ? ? <dd>男</dd>
? ? ? ? ? ? <dd>30</dd>
? ? ? ? ? ? <dd>本科</dd>
? ? ? ? ? ? <dd>公司A</dd>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? <dd>上海</dd>
? ? ? ? ? ? <dd>女</dd>
? ? ? ? ? ? <dd>28</dd>
? ? ? ? ? ? <dd>硕士</dd>
? ? ? ? ? ? <dd>公司B</dd>
? ? ? ? </li>
? ? ? ? <li>
? ? ? ? ? ? <dd>广州</dd>
? ? ? ? ? ? <dd>男</dd>
? ? ? ? ? ? <dd>35</dd>
? ? ? ? ? ? <dd>本科</dd>
? ? ? ? ? ? <dd>公司C</dd>
? ? ? ? </li>
? ? </ul>
? ? <script>
? ? ? ? function search() {
? ? ? ? ? ? var input, filter, ul, li, dd, i, txtValue;
? ? ? ? ? ? input = document.getElementById('searchInput');
? ? ? ? ? ? filter = input.value.toUpperCase();
? ? ? ? ? ? ul = document.getElementById('salesList');
? ? ? ? ? ? li = ul.getElementsByTagName('li');
? ? ? ? ? ? for (i = 0; i < li.length; i++) {
? ? ? ? ? ? ? ? dd = li[i].getElementsByTagName('dd');
? ? ? ? ? ? ? ? for (var j = 0; j < dd.length; j++) {
? ? ? ? ? ? ? ? ? ? txtValue = dd[j].textContent || dd[j].innerText;
? ? ? ? ? ? ? ? ? ? if (txtValue.toUpperCase().indexOf(filter) > -1) {
? ? ? ? ? ? ? ? ? ? ? ? li[i].style.display = "";
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? li[i].style.display = "none";
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</body>
</html>
结果图：
4、下拉表单
代码：
<!DOCTYPE html>
<html lang="en">
<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";
? ? ? ? ? ? background-color: #f4f4f4;
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? display: flex;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? height: 100vh;
? ? ? ? }
? ? ? ? select {
? ? ? ? ? ? padding: 10px;
? ? ? ? ? ? font-size: 16px;
? ? ? ? ? ? border: none;
? ? ? ? ? ? border-radius: 5px;
? ? ? ? ? ? background-color: #f9f9f9;
? ? ? ? ? ? appearance: none;
? ? ? ? ? ? -webkit-appearance: none;
? ? ? ? ? ? -moz-appearance: none;
? ? ? ? ? ? background-image: url('data:image/svg+xml;utf8,<svg fill="%231e1e1e" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M7 10l5 5 5-5z"/></svg>');
? ? ? ? ? ? background-repeat: no-repeat;
? ? ? ? ? ? background-position: right 10px top 50%;
? ? ? ? ? ? background-size: 20px;
? ? ? ? ? ? transition: all 0.3s ease;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ? select:hover {
? ? ? ? ? ? background-color: #e9e9e9;
? ? ? ? }
? ? ? ? select:focus {
? ? ? ? ? ? outline: none;
? ? ? ? ? ? box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
? ? ? ? }
? ? </style>
</head>
<body>
? ? <select>
? ? ? ? <option value="option1">Option 1</option>
? ? ? ? <option value="option2">Option 2</option>
? ? ? ? <option value="option3">Option 3</option>
? ? ? ? <option value="option4">Option 4</option>
? ? </select>
</body>
</html>
效果图：
5、模仿csdn里新闻详情页面
代码：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
? ? <style>
? ? ? ?/* 设置全局样式 */
? ? ? ?body {
? ? ? ? font-family: "Arial, sans-serif";
? ? ? ? background-color: #f8f9fa;
? ? ? ? color: #212529;
? ? ? ? margin: 0;
? ? ? ? padding: 0;
? ? ? ?}
? ? ? ?
? ? ? ?/* 设置头部样式 */
? ? ? ?.header {
? ? ? ? background-color: #007bff;
? ? ? ? color: #fff;
? ? ? ? padding: 10px;
? ? ? ? text-align: center;
? ? ? ?}
? ? ? ?
? ? ? ?/* 设置新闻列表样式 */
? ? ? ?.news-list {
? ? ? ? margin: 20px 0;
? ? ? ?}
? ? ? ?
? ? ? ?.news-list li {
? ? ? ? list-style: none;
? ? ? ? margin-bottom: 20px;
? ? ? ?}
? ? ? ?
? ? ? ?.news-list li a {
? ? ? ? display: block;
? ? ? ? padding: 10px;
? ? ? ? background-color: #fff;
? ? ? ? border-radius: 5px;
? ? ? ? color: #212529;
? ? ? ? text-decoration: none;
? ? ? ?}
? ? ? ?
? ? ? ?.news-list li a:hover {
? ? ? ? background-color: #007bff;
? ? ? ? color: #fff;
? ? ? ? transition: background-color 0.3s ease-in-out;
? ? ? ?}
? ? ? ?
? ? ? ?/* 设置新闻详情样式 */
? ? ? ?.news-detail {
? ? ? ? margin: 20px 0;
? ? ? ?}
? ? ? ?
? ? ? ?.news-detail h2 {
? ? ? ? font-size: 24px;
? ? ? ? font-weight: bold;
? ? ? ? margin-top: 0;
? ? ? ?}
? ? ? ?
? ? ? ?.news-detail p {
? ? ? ? font-size: 16px;
? ? ? ? line-height: 1.5;
? ? ? ? margin-top: 0;
? ? ? ?}
? ? ? ?
? ? ? ?/* 设置搜索样式 */
? ? ? ?.search-form {
? ? ? ? margin-top: 20px;
? ? ? ?}
? ? ? ?
? ? ? ?.search-form input[type="text"] {
? ? ? ? padding: 10px;
? ? ? ? border-radius: 5px;
? ? ? ? border: none;
? ? ? ? background-color: #f8f9fa;
? ? ? ? color: #212529;
? ? ? ? margin-right: 10px;
? ? ? ?}
? ? ? ?
? ? ? ?.search-form button[type="submit"] {
? ? ? ? background-color: #007bff;
? ? ? ? color: #fff;
? ? ? ? border: none;
? ? ? ? border-radius: 5px;
? ? ? ? padding: 10px;
? ? ? ?}
? ? ? ?
? ? ? ?/* 设置响应式样式 */
? ? ? ?.container {
? ? ? ? max-width: 800px;
? ? ? ? margin: 0 auto;
? ? ? ?}
? ? ? ?
? ? ? ?@media (max-width: 768px) {
? ? ? ? .container {
? ? ? ? ? ?max-width: 400px;
? ? ? ? }
? ? ? ?}
? ? </style>
</head>
<body>
? ? ? ?<h1> 北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
? ? ? ?<div class="gray"> 2019-07-03 16:31:47 来源: <a href="#">中国天气网</a> ?
? ? ? ? <input type="text" value="请输入查询条件..." class="search"> ?<button class="btn">搜索</button>
? ? </div>
? ? ? ? <hr>?
? ? ? ? <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>
? ? ? ??
? ? ? ? <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
? ? ? ? <p class="pic">
? ? ? ? ? ? <img src="images/pic.jpeg" alt="">
? ? ? ? </p>
? ? ? ? <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>
? ? ? ??
? ? ? ??
? ? ? ??
? ? ? ? <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>
? ? ? ??
? ? ? ? <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
? ? ? ? <p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
? ? ? ??
? ? ? ?<p> 不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>
? ? ? ??
? ? ? ?<p class="footer"> 本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</body>
</html>
效果图：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！