一、📚作品介绍

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

https://live.csdn.net/v/embed/240085

(title-L21JP 个人博客个人介绍 4页 带js 滚动轮播图)]

                                                        
                            
                                            我的主页                我的家乡                我的爱好                给我留言                                                                                                                                                                                                                                                                                                                                                    <                                                                 >                                                                                            我去过的                                                        
颐和园
                                                        
重庆
                                                        
辽宁
                                                        
海南
                                        
                姓名：******
                爱好：拳击，打球，健身，读书
                性格：开朗
                特长：打蓝球，拳击
                家乡：新疆和田地区            
            
                自我评价                本人性格开朗、踏实、稳重、有活力，待人热情、真诚。喜欢在空余的时间看书和听音乐，从中减轻平时学习中带来的压力，还可以学到书本中学不到的知识，开拓自己的眼界、积极并不断进取是我做事的原则，谦虚和谨慎是我的优点，懂得不断从生活和学习中提高和完善自己、为人诚实，有良好的人际交往能力，具备相关的专业知识和认证细心的做事态度。            
                    
/div id="mian">

* {    margin: 0px;    padding: 0px;    list-style: none;}body {    background-color: #E5E5E5;}#bigbox {    width: 1000px;    margin: 0 auto;    -moz-box-shadow: 2px 2px 5px #333333;    -webkit-box-shadow: 2px 2px 5px #333333;    box-shadow: 2px 2px 5px #333333;}#title {    position: relative;    width: 1000px;    font-size: 0px;}#title>img {    width: 1000px;    height: 104px;}#title div img {    position: absolute;    width: 80px;    top: 12px;    left: 50px;    border-radius: 50%;}#mian {    background-color: #fff;    padding-top: 10px;    font-size: 0px;}#mian>div {    font-size: 16px;}#mian_left {    width: 180px;    display: inline-block;    height: 390px;}#mian_left a {    display: inline-block;    text-align: center;    width: 160px;    background: #525252;    /* fallback for old browsers */    background: -webkit-linear-gradient(to right, rgb(82, 82, 82), rgb(61, 114, 180));    /* Chrome 10-25, Safari 5.1-6 */    background: linear-gradient(to right, rgb(82, 82, 82), rgb(61, 114, 180));    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */    height: 30px;    margin-left: 10px;    text-decoration: none;    color: #fff;    line-height: 30px;    border-radius: 4px;    margin-top: 10px;    font-size: 14px;}#mian_left a:hover {    color: #171717;    font-weight: bold;}#mian_right {    height: 370px;    width: 810px;    background-color: #171717;    display: inline-block;    border-radius: 4px;    overflow: hidden;}#bg2 {    margin-top: 10px;    width: 160px;    margin-left: 10px;    height: 210px;    background-color: #171717;    border-radius: 4px;    overflow: hidden;}* {    margin: 0;    padding: 0;}.content {    width: 810px;    height: 370px;    position: relative;    overflow: hidden;    margin: 0 auto;}.wrapper {    width: 400%;    height: 100%;    margin: 0;    padding: 0;    position: absolute;    top: 0;    left: 0;    display: flex;    transition: none;}.wrapper li {    flex: 1;    list-style: none;    margin: 0;    padding: 0;}.wrapper li img {    width: 810px;    height: 370px;}.radius {    height: 12px;    margin: 0;    padding: 0;    position: absolute;    bottom: 10px;    left: 10px;    display: flex;    align-items: center;}.radius li {    width: 8px;    height: 8px;    border-radius: 50%;    background-color: white;    opacity: 0.6;    margin: 0 3px;    padding: 0;    list-style: none;}.radius-active {    opacity: 1 !important;    border: 2px solid rgb(255, 255, 255, 0.5);    background-clip: padding-box;}.prev {    width: 23px;    line-height: 34px;    text-align: center;    position: absolute;    left: 0;    top: 50%;    margin-top: -17px;    background-color: darkgray;    opacity: 0;}.next {    width: 23px;    line-height: 34px;    text-align: center;    position: absolute;    right: 0;    top: 50%;    margin-top: -17px;    background-color: darkgray;    opacity: 0;}.prev span,.next span {    font-weight: bold;    color: white;    font-size: 18px;}#bg2 img {    width: 160px;}#main2 {    padding-top: 30px;    padding-bottom: 30px;    font-size: 0px;    width: 1000px;    background-color: #fff;    margin-top: 10px;    display: flex;}#tupian {    display: inline-block;    text-align: center;    margin-left: 24px;    line-height: 30px;}#tupian img {    height: 200px;    border-radius: 4px;}.title {    display: inline-block;    font-size: 24px !important;    width: 24px;    margin-left: 30px;    font-weight: bold;    color: #3F6EA9;    line-height: 50px;    margin-right: 40px;}#main2 p {    font-size: 16px;}#main3 {    position: relative;    width: 1000px;    height: 170px;    padding-top: 30px;    padding-bottom: 30px;    background-color: #F1F1F1;    margin-top: 10px;    margin-bottom: 20px;}#main3 p {    font-size: 14px;    line-height: 35px;    margin-left: 30px;}#main3 p:last-child {    position: absolute;    right: 30px;    top: 30px;    width: 500px;}#main3 span {    font-weight: bold;}footer {    width: 1000px;    text-align: center;    line-height: 60px;    background: #525252;    /* fallback for old browsers */    background: -webkit-linear-gradient(to right, rgb(82, 82, 82), rgb(61, 114, 180));    /* Chrome 10-25, Safari 5.1-6 */    background: linear-gradient(to right, rgb(82, 82, 82), rgb(61, 114, 180));    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */    color: #fff;    font-size: 14px;}#main4 {    width: 1000px;    margin-top: 10px;    margin-bottom: 20px;    padding-top: 30px;    padding-bottom: 30px;    background-color: #F1F1F1;}#main4 p {    width: 980px;    margin-left: 10px;    text-indent: 28px;    font-size: 16px;    line-height: 30px;}#main4 span {    font-size: 30px;    font-weight: bold;}#main5 {    width: 1000px;    margin-top: 10px;    margin-bottom: 20px;    padding-top: 30px;    padding-bottom: 30px;    line-height: 50px;    background-color: #F1F1F1;}#main5 h3 {    text-align: center;}#main5 div {    margin: 0 auto;    width: 300px;}#main5 span {    display: inline-block;    width: 70px;}button {    width: 100px;    height: 30px;    margin-left: 80px;}

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）

📕【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app