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>快捷导航栏</td>
<td>shortcut</td>
</tr>
<tr>
<td>头部</td>
<td>header</td>
</tr>
<tr>
<td>标志</td>
<td>logo</td>
</tr>
<tr>
<td>购物车</td>
<td>shopcar</td>
</tr>
<tr>
<td>搜索</td>
<td>search</td>
</tr>
<tr>
<td>热点词</td>
<td>hotwords</td>
</tr>
<tr>
<td>导航</td>
<td>nav</td>
</tr>
<tr>
<td>导航左侧</td>
<td>dropdown包含.dd .dt</td>
</tr>
<tr>
<td>导航右侧</td>
<td>navitems</td>
</tr>
<tr>
<td>页面底部</td>
<td>footer</td>
</tr>
<tr>
<td>页面底部服务模块</td>
<td>mod_service</td>
</tr>
<tr>
<td>页面底部帮助模块</td>
<td>mod_help</td>
</tr>
<tr>
<td>页面底部版权模块</td>
<td>mod_copyright</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w">
<h3>
<span></span>
<span>快捷导航shortcut制作</span>
</h3>
<figure>
<img style="width:100%!important;height:30px!important" src="https://img-blog.csdnimg.cn/8ba7bca995694473ae6b3deb57933efd.png" alt="">
</figure>
<ul>
<li><p>给通栏的盒子加行高，里面子盒无需加行高，可以继承父盒行高</p></li>
<li><p>里面包含版心的盒子，版心盒子里面包含1号左浮动盒子，2号右浮动盒子</p></li>
<li><p>1号左浮动盒子里面用<code>ul</code>制作，第二个<code>li</code>里面包含两个<code>a</code>标签，利用<code>nbsp</code>隔开每个内容的间距</p></li>
<li><p>2号右浮动盒子也使用<code>ul</code>制作，因为内容字数不一样，所以<code>li</code>不能给宽度</p></li>
<li><p>右侧盒子中竖线 | ，也可以设为一个盒子，加左右外边距，间隔开每个<code>li</code></p></li>
<li><p>小竖线的技巧，每个双数的<code>li</code>就是小竖线，利用结构伪类选择器<code>:nth-child(even)</code></p></li>
<li><p>右侧盒子的部分文字内容右侧有个向下的小箭头，利用<code>::after</code>伪元素进行添加，采用字体图标</p></li>
<li><p>注意字体图标的路径问题 <code>url('../fonts)</code></p></li>
</ul>
<figure>
<img style="width:300px!important;" src="https://img-blog.csdnimg.cn/584d7f48276740ee85ba59db7071a1c3.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaW1CeXRl,size_13,color_FFFFFF,t_70,g_se,x_16" alt="">
</figure>
</div>
<div class="w">
<h3>
<span></span>
<span>header制作</span>
</h3>
<figure>
<img src="https://img-blog.csdnimg.cn/ae9a6c5fb90942fc889007c721eae0a8.png" alt="">
</figure>
<ul>
<li><p>header 盒子必须要有高度，并且包含版心的样式</p></li>
<li><p>1 号盒子是 logo 标志，采取定位</p></li>
<li><p>2 号盒子是 search 搜索模块，采取定位</p></li>
<li><p>3 号盒子是 hotwords 热词模块，采取定位</p></li>
<li>
<p>4 号盒子是 shopcar 购物车模块，采取定位</p>
<ul>
<li><p>count 统计部分用绝对定位做</p></li>
<li><p>count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度</p></li>
<li><p>一定注意左下角不是圆角，其余三个是圆角，写法：boder-radius:7px 7px 7px 0;</p></li>
</ul>
</li>
</ul>
<figure>
<img style="width:300px!important;" src="https://img-blog.csdnimg.cn/aea966b102bf46c884f36aef05533ad7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaW1CeXRl,size_17,color_FFFFFF,t_70,g_se,x_16" alt="">
</figure>
<blockquote>
<p><b>实际开发中真正的 logo 应该怎样去做：要符合 SEO优化</b></p>
</blockquote>
<ul>
<li><p>logo 里面首选先放一个<code>h1标签</code>，目的是为了提权，告诉搜索引擎，这个地方很重要</p></li>
<li><p><code>h1</code>里面再放一个链接，可以点击返回首页，把logo的背景图片给链接即可</p></li>
<li>
<p>为了搜索引擎收录我们，链接里面要放文字说明<i>网站名称</i>，但是文字不要显示出来</p>
<ul>
<li><p>方法1：<code>text-index</code>移到盒子外面<code>text-index:-9999px</code>，然后<code>overflow:hidden</code>（淘宝做法）</p></li>
<li><p>方法2：直接给<code>font-size:0</code>，就看不到文字了（京东做法）</p></li>
</ul>
</li>
<li><p>最后给链接一个<code>title</code>属性，这样鼠标放到Logo上就可以看到提示文字了</p></li>
</ul>
</div>
<div class="w">
<h3>
<span></span>
<span>nav 导航制作</span>
</h3>
<figure>
<img src="https://img-blog.csdnimg.cn/c582c02527c549ba84e1b2d2e14be7aa.png" alt="">
</figure>
<ul>
<li><p>nav 盒子通栏有高度，而且有个下边框</p></li>
<li><p>1 号盒子左侧浮动，dropdown</p></li>
<li><p>2 号盒子左侧浮动，navitems 导航栏组</p></li>
<li><p>1号盒子有讲究，根据相关性里面包含 .dt 和 .dd 两个盒子</p></li>
</ul>
<figure>
<img src="https://img-blog.csdnimg.cn/4e67131db2cd40dda86802fe3f293977.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaW1CeXRl,size_20,color_FFFFFF,t_70,g_se,x_16" alt="">
</figure>
<ul>
<li><p><code>dl</code>定义列表标签</p></li>
<li><p><code>dt</code>定义列表标题</p></li>
<li><p><code>dd</code>定义列表内容</p></li>
</ul>
<figure>
<img style="width:350px!important;" src="https://img-blog.csdnimg.cn/0ab243b5301e4130a6a8d54e9200c5e6.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>footer 底部制作</span>
</h3>
<figure>
<img src="https://img-blog.csdnimg.cn/d59116aaa2ac4a79a4d25d7788cdebe0.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaW1CeXRl,size_20,color_FFFFFF,t_70,g_se,x_16" alt="">
</figure>
<ul>
<li><p>footer 页面底部盒子通栏给一个高度和灰色的背景</p></li>
<li><p>footer 里面有一个大的版心</p></li>
<li><p>版心里面包含 1 号盒子，mod_service 是服务模块，mod 是模块的意思</p></li>
<li><p>版心里面包含 2 号盒子，mod_help 是帮助模块</p></li>
<li><p>版心里面包含 3 号盒子，mod_copyright 是版权模块</p></li>
</ul>
<figure>
<img style="width:400px!important;" src="https://img-blog.csdnimg.cn/30ab4e25937c46ddbbe3efb52c3f62c9.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>main 主体模块制作</span>
</h3>
<figure>
<img src="https://img-blog.csdnimg.cn/8e207debe6d74858814eceaa15e1bd68.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaW1CeXRl,size_20,color_FFFFFF,t_70,g_se,x_16" alt="">
</figure>
<p><strong>main主体模块是<code>index</code>里面专有的，注意需要新的样式文件<code>index.css</code></strong></p>
<ul>
<li><p>main 盒子宽度为 980 像素，位置距离左边<code>margin-left: 220px;</code>给高度就不用清除浮动</p></li>
<li><p>main 里面包含左侧盒子，左浮动，focus 焦点图模块</p></li>
<li><p>main 里面包含右侧盒子，右浮动，newsflash 新闻快报模块</p></li>
</ul>
<p><strong>newsflash 新闻快报模块</strong></p>
<figure>
<img style="width:200px !important;" src="https://img-blog.csdnimg.cn/b893ed3e87294c0d97efe687f6e65404.png" alt="">
</figure>
<ul>
<li><p>1 号盒子为 news 新闻模块 高度为 165px</p></li>
<li><p>2 号盒子为 lifeservice 生活服务模块 高度为 209px</p></li>
<li><p>3 号盒子为 bargain 特价商品广告</p></li>
</ul>
<p><strong>news 新闻模块</strong></p>
<figure>
<img style="width:300px!important;" src="https://img-blog.csdnimg.cn/aa73f9277e264a17bfe5df010788cab8.png" alt="">
</figure>
<ul>
<li><p>注意：这里我们分为上下两个模块，但是两个模块都用 div</p></li>
<li><p>1 号盒子 news-hd 新闻头部模块，给一个高度和下边框</p></li>
<li><p>2 号盒子 news-bd 新闻主题部分，里面包含 ul 和 li 还有链接</p></li>
</ul>
<p><strong>lifeservice 生活服务模块</strong></p>
<figure>
<img style="width:300px!important;" src="https://img-blog.csdnimg.cn/518b1b1f43424f5db29a7205efb0e072.png" alt="">
</figure>
<ul>
<li><p>lifeservice 盒子宽度为 250 ，但是装不开里面的 4 个小 li</p></li>
<li><p>可以让 lifeservice 里面的 ul 宽度为 252，就可以装的下 4 个 小 li，或者可以采用 <code>width:25%;</code></p></li>
<li><p>lifeservice 盒子 <code>overflow:hidden;</code> 隐藏多余的部分就可以了</p></li>
</ul>
</div>
<div class="w">
<h3>
<span></span>
<span>推荐模块recom制作</span>
</h3>
<figure>
<img src="https://img-blog.csdnimg.cn/7ee49330522b435fbffc95e1dde47b89.png" alt="">
</figure>
<ul>
<li><p>大盒子 recom 推荐模块 recommend</p></li>
<li><p>里面包含 2 个盒子，浮动即可</p></li>
<li><p>1 号盒子 recom_hd</p></li>
<li><p>2 号盒子 recom_bd，注意里面的小竖线</p></li>
</ul>
</div>
<div class="w">
<h3>
<span></span>
<span>楼层区floor制作</span>
</h3>
<p>注意这个<code>floor</code>，不要给高度，内容有多少，算多少，用内容撑开文字</p>
<p><strong>1. box_hd模块</strong></p>
<figure>
<img src="https://img-blog.csdnimg.cn/d4328145ab9246f2a9e51857b016a18a.png" alt="">
</figure>
<ul>
<li><p>1号盒子<code>box_hd</code>，有高度可以不用清除浮动，有下边框，里面分为左右两个盒子</p></li>
<li><p>左边 h3，盒子左浮动</p></li>
<li><p>右边 <code>tab_list</code>，右浮动，因为用到 tab 切换效果，所以里面要用 ul 和 li 来做</p></li>
</ul>
<p><strong>2. box_bd 模块</strong></p>
<figure>
<img src="https://img-blog.csdnimg.cn/eaf040661f344a89b8a3db0a77092f1e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaW1CeXRl,size_20,color_FFFFFF,t_70,g_se,x_16" alt="">
</figure>
<ul>
<li><p>根据 tab 切换的原理，<code>tab_content</code> 里面包含内容部分，这个内容可以通过ul布局</p></li>
<li><p>分为5个大列，列的宽度不一致</p></li>
</ul>
<p><strong>3. Tab栏原理-布局需求</strong></p>
<figure>
<img src="https://img-blog.csdnimg.cn/1034d10c9438417d815bfbaac1fe0583.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAaW1CeXRl,size_20,color_FFFFFF,t_70,g_se,x_16" alt="">
</figure>
<ul>
<li><p>要求选项卡个数要内容个数一致</p></li>
<li><p>当点击哪个选项卡，对应的内容区域就显示出来，其余的隐藏</p></li>
</ul>
</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 ul ul li {
list-style: disc;
}
.cont ol ul li {
list-style: disc;
}
.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 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%;
}
}