SEO优化-网站框架
commit
931b118632
|
|
@ -0,0 +1,127 @@
|
|||
/* -moz-:代表firefox(火狐)浏览器私有属性
|
||||
-ms-:代表ie浏览器私有前缀
|
||||
-webkit-:代表safari、chrome私有属性
|
||||
-o-:代表Opera私有属性
|
||||
*/
|
||||
/* 清空所有标签的内外边距 */
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* css3盒子模型 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
header,
|
||||
main{
|
||||
background-color: #FFFFFF;
|
||||
min-width: 320px;
|
||||
/* max-width: calc(100% - 180px); */
|
||||
max-width: calc(1920px - 640px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
body {
|
||||
/* 抗锯齿性-让文字显示的更加清晰 */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #F5F5F5;
|
||||
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
/* em 和 i 斜体的文字不倾斜 */
|
||||
em,
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* 去掉li 的小圆点 */
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
button {
|
||||
/* 当我们鼠标经过button按钮的时候，鼠标变成小手 */
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
/* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */
|
||||
border: 0;
|
||||
/* 取消图片底侧有空白缝隙的问题 ① */
|
||||
vertical-align: middle;
|
||||
/* 取消图片底侧有空白缝隙的问题 ② */
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
/* 去掉a标签的下划线，并修改字体颜色 */
|
||||
a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
/* 手机端去除a标签点击时的背景样式 */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
/* 去除边距 */
|
||||
display: inline-block;
|
||||
}
|
||||
a:hover {
|
||||
color: #c81623;
|
||||
}
|
||||
/* 禁用长按时弹出的菜单 */
|
||||
img , a {
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
textarea{
|
||||
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
|
||||
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
||||
/* 取消轮廓 */
|
||||
outline: none;
|
||||
/* 去掉默认外观 */
|
||||
/* -webkit-appearance: none; */
|
||||
/* 去掉点击时的默认外观 */
|
||||
outline-style: none;
|
||||
}
|
||||
textarea {
|
||||
/* 禁止自定义拉伸 */
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.hide,
|
||||
.none {
|
||||
display: none
|
||||
}
|
||||
/* 清楚浮动 */
|
||||
.clearfix:after {
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
display: block;
|
||||
content: ".";
|
||||
height: 0
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
*zoom: 1
|
||||
}
|
||||
|
||||
.logo h1 a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.clips1{
|
||||
/* 弹性伸缩盒子模型显示 */
|
||||
display: -webkit-box;
|
||||
/* 用省略号代替 */
|
||||
text-overflow: ellipsis;
|
||||
/* 设置或检索伸缩盒对象的子元素的排列方式 */
|
||||
-webkit-box-orient: vertical;
|
||||
/* 禁止数字和英文换行 */
|
||||
word-break: break-all;
|
||||
/* 限制在一个块元素显示的文本的行数 */
|
||||
-webkit-line-clamp: 1;
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
}
|
||||
.clips2{display: -webkit-box;-webkit-line-clamp: 2;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
|
||||
.clips3{display: -webkit-box;-webkit-line-clamp: 3;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
|
||||
.clips4{display: -webkit-box;-webkit-line-clamp: 4;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
|
||||
.clips5{display: -webkit-box;-webkit-line-clamp: 5;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
|
||||
.clips6{display: -webkit-box;-webkit-line-clamp: 6;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
|
||||
.clips7{display: -webkit-box;-webkit-line-clamp: 7;word-break: break-all;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
/* 轮播样式 start */
|
||||
.banner-swiper {
|
||||
overflow-x: hidden;
|
||||
height: 76vh;
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.banner-swiper .swiper-slide {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.banner-swiper .swiper-slide h1{
|
||||
position: absolute;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 2px 3px 10px rgba(0,0,0,.8);
|
||||
}
|
||||
/* 指示点默认样式 */
|
||||
.banner-swiper .swiper-pagination-bullet {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
/* 鼠标悬浮样式、当前选中指示点样式 */
|
||||
.banner-swiper .swiper-pagination-bullet:hover,.banner-swiper .swiper-pagination-bullet-active {
|
||||
background-color: rgba(0,0,0,.8);
|
||||
color: #FFFFFF;
|
||||
opacity: 1;
|
||||
}
|
||||
/* 轮播样式 end */
|
||||
|
||||
/* 导航 start */
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
box-shadow: 0px 2px 0px rgba(0,0,0,.1);
|
||||
}
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.nav-box {
|
||||
position: relative;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
/* 下滑线 */
|
||||
.nav-box .line {
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin: 10px 0 0 0;
|
||||
background: #FF1847;
|
||||
}
|
||||
.nav-box ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
}
|
||||
.nav-box ul li {
|
||||
margin: 0 40px 0 0;
|
||||
opacity: 0.4;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
/* 鼠标悬浮 */
|
||||
.nav-box ul li:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
/* 当前选中 */
|
||||
.nav-box ul li.active {
|
||||
opacity: 1;
|
||||
}
|
||||
/* 最后一个li */
|
||||
/* .nav-box ul li:last-child {
|
||||
margin-right: 0;
|
||||
} */
|
||||
.nav-box ul li a {
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2em;
|
||||
font-size: 14px;
|
||||
}
|
||||
/* 导航 end */
|
||||
.footer {
|
||||
width: 100%;
|
||||
height: 200vh;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<!-- 更加标准的 lang 属性写法 zh-cmn-Hant:繁体中文，zh-cmn-Hans:简体中文 -->
|
||||
<html lang="zh-cmn-Hans">
|
||||
<head>
|
||||
<!-- 声明文档使用的字符编码 -->
|
||||
<meta charset="utf-8" />
|
||||
<!-- 优先使用 IE 最新版本和 Chrome -->
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<!-- 网页作者 -->
|
||||
<meta name="author" content="吃肉的饺子,2659004835@qq.com" />
|
||||
<!-- 网站说明 -->
|
||||
<meta name="description" content="基于SEO网站" />
|
||||
<!-- 关键字 -->
|
||||
<meta name="keywords" content="基于SEO网站" />
|
||||
<!-- 防页面被转码----根据浏览器的屏幕大小自适应的展现合适的效果，同时适合在移动设备和电脑上进行浏览 -->
|
||||
<meta name="applicable-device" content="pc,mobile" />
|
||||
<meta name="MobileOptimized" content="width" />
|
||||
<meta name="HandheldFriendly" content="true" />
|
||||
<!-- 限制所有的搜索引擎建立网页快照 -->
|
||||
<meta name="robots" content="noarchive"/>
|
||||
<!-- 为移动设备添加 viewport -->
|
||||
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
|
||||
<!-- 控制选项卡颜色，手机端切换软件时 -->
|
||||
<meta name="theme-color" content="#db5945">
|
||||
<!-- 禁止 Chrome 浏览器中自动提示翻译 -->
|
||||
<meta name="google" value="notranslate">
|
||||
<!-- 添加 favicon icon icon在线制作链接：（比特虫）https://www.bitbug.net/ -->
|
||||
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
|
||||
<!-- 网站标题 -->
|
||||
<title>seo框架</title>
|
||||
<!-- 标签基本样式 -->
|
||||
<link rel="stylesheet" type="text/css" href="./css/base.css"/>
|
||||
<!-- 自定义样式 -->
|
||||
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
|
||||
<!-- 外部js -->
|
||||
<script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 头部导航 -->
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<!-- logo seo优化 -->
|
||||
<div class="logo">
|
||||
<h1>
|
||||
<a href="index.html" title="seo框架">
|
||||
<img src="123" height="70" style="margin-right: 6px;" onerror="this.src='./imgs/public/小桶龙.png'" alt="logo图">
|
||||
<span>SEO框架</span>
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- 主体内容 -->
|
||||
<main class="main">
|
||||
|
||||
</main>
|
||||
<!-- 底部部分 -->
|
||||
<footer class="footer">
|
||||
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue