文章目录
-
- 代码位置
- 1、网页效果
- 2、项目结构
- 3、部分css样式
- 4、部分页面代码
- 5、整体情况
- 6、如何运行
- 7、后语
代码位置
源代码位置：http://t.csdn.cn/nC8U4
1、网页效果
#轮播图实现动态切换
2、项目结构
3、部分css样式
/*去除默认样式*/
::-webkit-scrollbar {
width: 0;
height: 1px
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
background: rgba(0, 0, 0, .2)
}
* {
outline: none;
box-sizing: border-box;
}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;
padding:0;
}
ul {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: black;
}
/*正常的未被访问过的链接*/
a:link {
text-decoration: none;
}
/*已经访问过的链接*/
a:visited {
text-decoration: none;
color: black;
}
/*鼠标划过(停留)的链接*/
a:hover {
text-decoration: none;
}
/* 正在点击的链接，鼠标在元素上按下还没有松开*/
a:active {
text-decoration: none;
}
/* 获得焦点的时候 鼠标松开时显示的颜色*/
a:focus {
text-decoration: none;
}
/* 轮播图 */
.swiper-container {
width: 100%;
height: 350px;
}
.carousel-img {
width: 100%;
height: 100%;
}
.bg-gray {
background-color: #EEEEEE;
}
.p-10 {
padding: 10px 0;
}
4、部分页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="content-type" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
<title>首页</title>
<link href="css/swiper-5.4.5/swiper.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/my.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="stylesheet" href="css/nav.css">
</head>
<body style="background-color: #f2dede">
<div id="wrapper">
<!--weather
<div style="text-align: right;">
<iframe width="700" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=1&num=5"></iframe>
</div>
weather-->
<!-- 头部开始 -->
<div style="width: 100%; height: 30px; line-height: 30px; background-color: #518657">
<div class="container">
<div class="col-md-6" style="text-align: left">
<a href="" target="_blank" style="color: white; margin-right: 20px">登录</a>
<a href="" target="_blank" style="color: white">注册</a>
</div>
<div class="col-md-6" style="color: yellow; text-align: right">
<span v-if="user.name">
欢迎您，{
{user.name}}
<a style="color: white" href="javascript:void(0)" >退出</a>
<a v-if="isCollect" style="margin-left: 10px" href="collectInfo.html">收藏夹</a>
</span>
</div>
</div>
<hr>
</div>
5、整体情况
6、如何运行
7、后语
如有需要、可进行商务探讨
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)