console
window.addEventListener('load', function () {
var goBack = document.querySelector('.goBack');
window.addEventListener('scroll', function () {
if (window.pageYOffset >= 100) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
});
goBack.addEventListener('click', function () {
window.scroll(0, 0);
});
})
<body>
<div class="page">
<div class="inner">
<div class="cont">
<div class="goBack"></div>
<h1 class="title"><span>品优购项目规划</span></h1>
</div>
<div class="cont">
<div class="w">
<h3>
<span></span>
<span>项目搭建</span>
</h3>
<p>需要要创建的文件夹</p>
<div class="table-box">
<table>
<thead>
<tr>
<th>文件夹名称</th>
<th>内容描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>shopping</td>
<td>项目根目录</td>
</tr>
<tr>
<td>css</td>
<td>项目样式表文件</td>
</tr>
<tr>
<td>fonts</td>
<td>项目字体图标</td>
</tr>
<tr>
<td>images</td>
<td>项目样式图片</td>
</tr>
<tr>
<td>uplaod</td>
<td>项目产品类图片</td>
</tr>
<tr>
<td>js</td>
<td>项目脚本样式</td>
</tr>
<tr>
<td>index.html</td>
<td>首页HTML文件</td>
</tr>
</tbody>
</table>
</div>
<figure>
<img style="width:200px!important" src="https://img-blog.csdnimg.cn/20201008131730599.png#pic_center" alt="">
</figure>
</div>
<div class="w">
<h3>
<span></span>
<span>模块化开发</span>
</h3>
<p>所谓的<i>模块化</i>，将一个项目按照功能划分，一个功能一个模块，互不影响，模块化发开具有重复使用，更换方便等优点</p>
<ul>
<li><p>有些样式和结构在很多页面都会出现，比如页面<i>头部、底部</i>大部分页面都有，此时可以把这些结构和样式单独作为一个模块，然后重复使用</p></li>
<li><p>最典型的应用就是<code>common.css</code>公共样式，写好一个样式，其余的页面利用这些相同的样式</p></li>
<li><p>模块化开发工具有重复使用、修改方便等优点</p></li>
<li><p><code>common.css</code>公共样式里面包含<i>版心宽度、清除浮动、页面文字颜色</i>等公共样式</p></li>
</ul>
<figure>
<img src="https://img-blog.csdnimg.cn/fe76cea7be324cacb42e482b0cd2cb12.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaW1CeXRl,size_20,color_FFFFFF,t_70,g_se,x_16" alt="">
</figure>
</div>
<div class="w">
<h3>
<span></span>
<span>网站favicon图标</span>
</h3>
<p><code>favicon.ico</code>一般用作为缩略图的网站标志，它显示在浏览器的地址栏或者标签上</p>
<figure>
<img src="https://www.bitbug.net/img/eg_favicon.png" alt="">
</figure>
<p>1. 制作favicon图标</p>
<ul>
<li><p>把需要的图片切成PNG格式图片</p></li>
<li><p>PNG图片转成ico图标，例如<i>比特虫</i><a href="http://www.bitbug.net/" target="_blank">http://www.bitbug.net</a></p></li>
</ul>
<p>2. 把<code>favicon</code>图标放到网站的根目录下</p>
<p>3. HTML页面引入<code>favicon</code>图片</p>
<pre><<span class="t1">link</span> <span class="t2">rel</span>=<span class="t4">"shortcut icon"</span> <span class="t2">href</span><span class="t4">"favicon.ico/"</span>></pre>
</div>
<div class="w">
<h3>
<span></span>
<span>网站TDK三大标签优化</span>
</h3>
<p>1. <code>SEO(Search Engine Optimization)</code>汉译为“搜索引擎优化”</p>
<ul>
<li><p>是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式</p></li>
</ul>
<p>2. SEO目的</p>
<ul>
<li><p>是<i>对网站进行深度优化</i>，从而帮助网站获免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度</p></li>
</ul>
<p>3. SEO优化的三大标签</p>
<ul>
<li>
<p><code>title：</code>具有不可替代性，是页面内的第一重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断</p>
<ul>
<li><p>建议：网站名（产品名）--网站的介绍（尽量不要超过30个汉字）</p></li>
<li><p>例如：京东（JD.COM）- 综合网购首选 - 正品低价、品质保障、配送及时、轻松购物</p></li>
</ul>
</li>
<li>
<p><code>description：</code>网站的描述说明</p>
</li>
<li>
<p><code>keyword：</code>页面关键字，是搜索引擎的关注点之一，最好限制在6-8个关键字，关键字之间用英文逗号隔开，采用<i>关键字1,关键字2,关键字3</i></p>
</li>
</ul>
<p><b>注意：三大标签都在head标签里面</b></p>
<pre>
<<span class="t0">head</span>>
<span class="t9">/* title 网站说明 */</span>
<<span class="t1">title</span>>京东（JD.COM）- 综合网购首选<<span class="t1">/title</span>>
<span class="t9">/* description 网站描述 */</span>
<<span class="t1">meta</span> <span class="t2">name</span>=<span class="t4">"description"</span> <span class="t2">content</span>=<span class="t4">"综合网购首选 - 正品低价、品质保障、配送及时、轻松购物"</span>>
<span class="t9">/* keword 网站关键字 */</span>
<<span class="t1">meta</span> <span class="t2">name</span>=<span class="t4">"keyword</span> <span class="t2">content</span>=<span class="t4">"正品低价,品质保障,配送及时,轻松购物"</span>>
<<span class="t0">/head</span>>
</pre>
</div>
</div>
</div>
</div>
</body>
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clear:after {
visibility: hidden;
clear: both;
display: block;
content: '';
height: 0
}
.clear {
*zoom: 1;
}
a {
color: #333;
text-decoration: none;
}
i,
em {
font-style: normal;
}
i {
color: #c81623;
}
b {
color: #135ce0;
}
strong {
color: #373737;
}
img {
border: 0;
vertical-align: middle;
}
input {
outline: none;
}
button {
cursor: pointer;
}
div.goBack {
display: none;
position: fixed;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
margin-left: 358px;
width: 26px;
height: 26px;
background: url(https://g.csdnimg.cn/side-toolbar/3.4/images/fanhuidingbucopy.png) no-repeat;
background-size: cover;
z-index: 999;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
font-family: system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Arial,"\5B8B\4F53",sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
text-underline-position: under;
text-decoration-skip-ink: none;
background-color: #fff;
}
.page {
position: relative;
word-wrap: break-word;
hyphens: auto;
background-color: #fff;
padding: calc(10px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) 0 calc(20px + env(safe-area-inset-left));
}
.inner {
position: relative;
max-width: 677px;
margin-left: auto;
margin-right: auto;
zoom: 1;
}
.inner .title {
font-size: 22px;
line-height: 1.4;
margin-bottom: 15px;
text-align: center;
}
.inner .title span {
padding: 0 0 10px;
border-bottom: 3px solid rgb(32, 87, 146);
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
font-size: 16px;
}
.cont {
visibility: visible;
position: relative;
overflow: auto;
color: #222;
font-size: 17px;
word-wrap: break-word;
hyphens: auto;
text-align: justify;
z-index: 0;
}
.cont * {
max-width: 100%!important;
box-sizing: border-box!important;
-webkit-box-sizing: border-box!important;
word-wrap: break-word!important;
}
.cont .w {
position: relative;
font-size: 16px;
color: black;
margin-bottom: 15px;
padding-right: 10px;
padding-left: 10px;
word-break: break-word;
overflow-wrap: break-word;
text-align: left;
line-height: 1.25;
letter-spacing: 2px;
font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
visibility: visible;
border: 1px solid transparent;
}
.cont .w:last-child {
margin-bottom: 100px;
}
.cont h3 {
margin-top: 20px;
margin-bottom: 15px;
font-weight: bold;
color: #373737;
font-size: 18px;
visibility: visible;
}
.cont h3 span:nth-child(1) {
position: absolute;
left: -1px;
margin-top: 2px;
width: 4px;
height: 20px;
background-color: rgb(199, 29, 35);
border-radius: 2px;
display: block;
float: left;
visibility: visible
}
.cont h3 span:nth-child(2) {
margin-left: 0px;
line-height: 26px;
visibility: visible;
}
.cont p {
margin-left: 1px;
margin-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
line-height: 26px;
font-size: 14px;
word-spacing: 2px;
color: rgb(55, 55, 55);
text-align: justify;
visibility: visible;
min-height: 1em;
}
.cont ul {
padding-left: 42px;
font-size: 14px;
}
.cont ul li p {
line-height: 35px;
word-spacing: 2px;
margin-left: 5px;
margin-right: 8px;
padding: 0;
}
.cont ol {
padding-left: 48px;
font-size: 14px;
}
.contol li p {
line-height: 35px;
word-spacing: 2px;
margin-left: -2px;
margin-right: 8px;
padding: 0;
}
.cont .table-box {
overflow-x: auto;
}
.cont table {
display: table;
width: 100%;
max-width: 600px !important;
margin: 0 auto 15px;
border-collapse: collapse;
word-break: break-word;
overflow-wrap: break-word;
font-size: 14px;
}
.cont table tr {
text-align: left;
border-top: 1px solid #dfe2e5;
}
.cont table tr td:nth-child(1) {
white-space: nowrap;
}
.cont table tr td:nth-child(2) {
white-space: nowrap;
}
.cont table th {
color: #135ce0;
font-size: 17px;
white-space: nowrap;
}
.cont table th,
.cont table td {
border: 1px solid #dfe2e5;
padding: 9px 20px;
}
.cont table td p {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
text-indent: 0;
margin: 0;
padding: 0;
}
.cont table td p:nth-child(n+2) {
margin: 10px 0 0 0;
}
.cont figure {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 15px auto 15px;
visibility: visible;
}
.cont figure img {
box-shadow: rgb(55 55 55 / 12%) 2px 4px 6px 0px;
border-radius: 8px;
visibility: visible !important;
height: auto !important;
width: 600px !important;
}
.cont .link {
margin: 20px 0;
}
.cont .link a {
padding: 10px 16px;
font-size: 13px;
color: white;
background-color: #e9686b;
border-radius: 8px;
}
.cont blockquote {
color: rgb(106, 115, 125);
margin: 15px 8px 20px;
padding: 16px;
border-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left: 3px solid #DBDBDB;
border-color: rgb(199, 29, 35);
border-radius: 8px;
box-shadow: rgb(199 29 35) 8px 8px 0px;
background: rgb(255, 255, 255);
}
.cont blockquote p {
font-size: 14px;
word-spacing: 2px;
line-height: 26px;
color: rgb(55, 55, 55);
text-align: left;
}
.cont pre {
margin: 10px auto 10px;
border-radius: 5px;
box-shadow: none !important;
position: relative;
overflow-x: auto;
padding: 8px 16px;
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 13px;
color: #abb2bf;
text-align: left;
line-height: 24px;
letter-spacing: 0px;
-webkit-overflow-scrolling: touch;
background: #272822;
white-space: pre;
}
.cont code {
font-size: 14px;
overflow-wrap: break-word;
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
word-break: break-all;
color: rgb(199, 29, 35);
}
.t0 {
color: #3f9cd6 !important;
}
.t1 {
color: #dcce80 !important;
}
.t2 {
color: #7cdcfe !important;
}
.t3 {
color: #b5ce9b !important;
}
.t4 {
color: #ce9178 !important;
}
.t5 {
color: #c678dd !important;
}
.t6 {
color: #ff8c00 !important;
}
.t8 {
color: #de645b !important;
}
.t9 {
color: #4a892d !important;
}
@media screen and (max-width: 500px) {
.cont .w p {
font-size: 16px;
}
.cont .w ul li p,
.cont .w ol li p {
font-size: 14px;
}
.cont ol p code,
.cont ul p code {
font-size: 14px;
}
.cont ol p a,
.cont ul p a, {
font-size: 14px;
}
.cont .w table td p {
font-size: 14px;
}
.cont .w table code {
font-size: 14px;
}
.cont .w blockquote p {
font-size: 14px;
}
.cont p code {
font-size: 16px;
}
div.goBack {
margin-left: 238px !important;
background-size: 70% 70%;
}
}