本文介绍了如何使用360断网急救箱修复Chrome浏览器无法上网的问题，并提供了解决VSCode扩展商店连接不上的方法。同时，展示了HTML和CSS代码，用于制作学成在线网站的Banner部分，包括导航栏、课程展示和登录功能。此外，还涵盖了网页设计的其他模块，如精品推荐、核心区域和页脚布局，提供了详细的HTML和CSS实现。
【解决chrome不能上网问题】
参考：http://www.win7zhijia.cn/jiaocheng/win7_40373.html
360断网急救箱解决
【解决vscode扩展商店连接不上的问题】
将此处override改为off
【制作学成在线的banner部分】
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- header -->
<div class="header w">
<!-- logo -->
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<!-- nav -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- search -->
<div class="search">
<input type="输入关键词" class="input">
<button class="fa-search">
</button>
</div>
<!-- login -->
<div class="login">
<img src="images/login.png" alt="" class="login-icon">
<span class="login-name">qq-leishui</span>
</div>
</div>
<!-- banner 一般都用banner名-->
<!-- <div class="bottleneck"> -->
<div class="banner">
<!-- <div class="bottleneck-w w"> 这个不必设置两个类选择器，只需用w在其上改-->
<div class="w">
<!-- subnav -->
<!-- <div class="nav1"> 用subnav名-->
<div class="subnav">
<ul>
<!-- >还没做，可放到span里，再浮动靠右（就它自己一个孩子）；直接写>或写>都行；行内元素包括行内元素 -->
<li><a href="#" class="nav1-top">前端开发<span>></span></a></li>
<li><a href="#">后端开发<span>></span></a></li>
<li><a href="#">移动开发<span>></span></a></li>
<li><a href="#">人工智能<span>></span></a></li>
<li><a href="#">商业预测<span>></span></a></li>
<li><a href="#">云计算&大数据<span>></span></a></li>
<li><a href="#">运维&从测试<span>></span></a></li>
<li><a href="#">UI设计<span>></span></a></li>
<li><a href="#" class="nav1-bottom">产品<span>></span></a></li>
</ul>
</div>
<!-- course -->
<div class="course">
<!-- 此处应一个标题一个div，因为它是加粗的；h是块元素，有高宽-->
<h2>我的课程表</h2>
<div class="bd">
<!-- 此处虽然有两行，但格式一样，仍用li来做，只不过没有a了 -->
<!-- 在设置关于li的内容时，先写一个li的内容，样式都设置完毕后再设置其他的li，这样方便观察和修改不易混-->
<!-- <a href="#"><p class="p1"><span class="span1">继续学习</span> <span class="span2">程序语言设计</span></p><p class="p2">正在学习-使用对象</p></a></li>
<a href="#"><p class="p2"><span class="span1">继续学习</span> <span class="span2">程序语言设计</span></p><p class="p2">正在学习-使用对象</p></a></li>
<a href="#"><p class="p3"><span class="span1">继续学习</span> <span class="span2">程序语言设计</span></p><p class="p2">正在学习-使用对象</p></a></li> -->
<ul>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
<li>
<h4>继续学习 程序语言设计</h4>
<p>正在学习-使用对象</p>
</li>
</ul>
<a href="#" class="more">全部课程</a>
</div>
</div>
<div></div>
</div>
</div>
</body>
</html>css文件
.w {
width: 1200px;
margin:auto;
}
* {
margin:0;
padding:0;
}
/* 为避免在后面的a中一直反复写此句，在最开头就设置一下 */
a {
text-decoration: none;
}
/* 双伪元素清除浮动的方法，每次都拷贝一下，加在父盒子上 */
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1;
}
/* header */
.header {
height: 42px;
margin:25px auto;
}
.logo {
float:left;
width: 195px;
height:42px;
}
.nav {
float:left;
height:42px;
width:360px;
margin-left:53px;
}
.nav ul {
float:left;
}
.nav ul li {
float:left;
margin:0 10px;
}
.nav ul a {
display:inline-block;
padding:0 10px;
border-bottom: 1px solid #00a4ff;
color:#414142;
font-size:18px;
height:41px;
line-height:41px;
}
.search {
float:left;
height:43px;
width:412px;
}
.search .input {
display:inline-block;
padding:0 270px 0 20px;
border:1px solid #00a4ff;
height:41px;
line-height:41px;
font-size:14px;
color:#d9dadb;
}
.search .fa-search {
height:43px;
width:48px;
background: #00a4ff url(images/fa-search.png) no-repeat center center;
}
.login {
float:left;
height:30px;
width:117px;
margin:6px 30px;
}
.login .login-icon {
width:30px;
height:30px;
}
.login .login-text {
display: inline-block;
padding-left:10px;
height:77px;
line-height:77px;
font-size:14px;
color:#666666
}
/* bottleneck */
.bottleneck {
/* width: 100%; 不用加此句，效果一样*/
height: 420px;
background-color: #1b036b;
}
.w {
/* width:1200px; 只加w没有的*/
height: 420px;
background: url(images/banner.png);
}
/* subnav */
ul {
list-style:none;
}
.subnav {
float: left;
width: 191px;
height: 420px;
/* background: rgba(170, 171, 172, 0.3); 设置黑色半透明（透明度0.3）*/
background: rgba(0, 0, 0, 0.3);
}
/* 完全不需要设置外边距，因为subnav高度定了，再设置外边距会扩大盒子；而且只需要设置行高即可，上面其实没有距离，自动最底下留出一部分距离 */
/* .subnav .nav1-top {
margin-top: 20px;
}
.nav1 .nav1-bottom {
margin-bottom: 20px;
} */
.subnav ul li {
height: 45px;
line-height: 45px;
padding:0 20px;
/* a是行内元素，将a居中，直接在li里设置行高等于高度即可；量行高时是上行文字的下边沿到下行文字的上边沿 */
}
/* 因为此ul中的li和a是竖着排列，就不用把li（ul和li都是块级元素）或者a（是行内元素）转换为行内块元素 */
/* 写a时把ul li也写上 */
.subnav ul li a {
/* display: inline-block;不必转换保持a为行内元素，内边距、高度和行高在li中设置即可 */
font-size: 14px;
color: white;
/* 写白色也可只写3个#fff或6个#ffffff */
text-decoration: none;
}
.subnav ul li span {
float: right;
}
.subnav ul li a:hover {
color: #00b4ff;
}
/* course */
.course {
float: right;
width: 229px;
height: 331px;
/* 浮动的盒子不会有外边距合并的问题 */
margin-top: 50px;
background-color: #fff;
}
.course h2 {
background-color: #9bceea;
height: 48px;
line-height: 48px;
text-align: center;
font-size: 18px;
color: #fff;
}
/* 注意：bd的背景为白色，h2的背景为蓝色，不必特意设置bd背景，而是设置course父盒子的背景即可，不然还需要写一个盒子的宽高背景之类，蓝色直接覆盖 */
/* .course .bd {
width: 229px;
height: 283px;
background-color: #fff;
} */
/* 注意：course的bd处也是用ul，li来做，但与subnav中的ul，li处理不同的是，此处li里面的内容不是一行字，而是两行字，
所以不能再用subnav里的那种给li设置行高了，因为设置行高等于宽高后li里面只能放一行的内容，只能设置上下边距，而高度又是个问题需要量两行的；
所以为了方便起见，宽高不用设置，li设置上下内边距，设置bd的左内边距；左右也不通过li的左右内边距设置，因为下边框没有顶到头，到可设置左右外边距 */
/* 总结此处li，li左右margin，li上下padding，或父左右padding ,li上下padding；之前li左右padding，上下不用*/
/* .course .bd a {
display: inline-block;
margin: 0 18px;
width: 190px;
height: 65px;
line-height: 65px; 给a或li设定行高，容易以为这是一行的，里面只能放一行的内容，所以li或a里面放不了2个p或h
border-bottom: 1px solid #e9e9e9;
text-decoration: none;
}
.course .bd a .p1 .span1 {
font-size: 16px;
color: #4e4e4e;
}
.course .bd a .p1 .span2 {
font-size: 14px;
color: #4e4e4e;
}
.course .bd a .p2{
font-size: 12px;
color: #a5a5a5;
} */
/* 若没有重复的选择器，只写一个就行，不必写父的 */
.bd {
padding: 0 20px;
}
.bd ul li {
padding: 15px 0;
border-bottom: 1px solid #ccc;
}
.bd ul li h4 {
font-size: 16px;
color: #4e4e4e;
}
.bd ul li p {
font-size: 12px;
color: #a5a5a5;
}
.bd .more {
display: block;
/* 此处直接写成block即可，不用写行内块 */
height: 35px;
/* width: 200px;此处不必设置宽度，因为bd已经padding左右内边距 */
border: 1px solid #00a4ff;
font-size: 16px;
/* 此处加粗 */
font-weight: 700;
color: #00a4ff;
line-height: 35px;
text-align: center;
margin-top: 5px;
text-decoration: none;
/* margin-left: 20px;父盒子bd已经设置左内边距的情况下，对a设置左外边距是相对于父的基础来说，实际上左边距变大，不管a是否浮动 */
}
我：
修正：
【制作精品推荐小模块】
<!-- goods -->
<div class="goods w">
<!-- 精品推荐不用放a里，不是链接，可放到标题里 -->
<h3>精品推荐</h3>
<ul>
<!-- <li><a href="#" class="a1">精品推荐</a></li> -->
<li><a href="#">JQuery</a></li>
<li><a href="#">Spark</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">JavaWeb</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">JavaWeb</a></li>
<!-- <li class="li2"><a href="#" class="a2">修改兴趣</a></li> -->
</ul>
<!-- 修改兴趣不和ul一起，单独放a里，右浮动再设置，前两块左浮动即可。 -->
<a href="#" class="mod">修改兴趣</a>
</div>/* goods精品推荐模块 */
.goods {
height: 60px;
line-height: 60px;
margin-top: 10px;
background-color: #fff;
box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.1);
/* 5个值的意思是，前2值必写，为正，则往右或往下，为负，则往左或往上；第3值模糊距离为0实线，越大模糊程度大，
第4值尺寸，越大，模糊的边界范围大，第5值模糊区域的颜色 */
/* 水平是0，在水平正中间；竖直是2，在竖直往下；模糊距离是2，边界范围是2，透明度让它接近0就不那么重*/
}
/* goods里面的三个float盒子垂直居中，不用挨个设置每个盒子的高度再对每个盒子设置行高，直接在大的父盒子上设置行高即可，行高有继承性 */
/* 设置左右距离，给h3和mod的左边距右边距即可 */
.goods h3 {
float: left;
margin-left: 30px;
font-size: 16px;
color: #00a4ff;
}
/* .goods ul {
float: left;
} 注：其实没必要把ul设置为left，而是把ul的li设置left即可，只ul设置left并不能起到效果li还是块*/
.goods ul {
margin-left: 30px;
}
.goods ul li {
float: left;
padding: 0 30px;
}
.goods ul li a {
font-size: 16px;
color: #050505;
border-left: 1px solid #ccc;
text-decoration: none;
}
.mod {
float: right;
margin-right: 30px;
font-size: 14px;
color: #00a4ff;
} 
<!-- box核心区域开始 -->
<!-- box核心区域先有一个大盒子，然后分为头部盒子和内容盒子，头部盒子包括两小部分h3和a，
内容盒子包括ul li，里面包括三小部分img，h4和div。h标签其实用的还蛮多的 -->
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<!-- 先写出所有li，但不放内容，构建好大框架，再设置第一个li的所有内容，删掉其他的li框架，复制粘贴即可-->
<div class="box-bd">
<ul>
<li>
<img src="images/img1.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="info"><span>高级</span> · 1125人在学习</div>
</li>
<li>
<img src="images/img2.png" alt="">
<h4>Android 网络图片加载框架详解</h4>
<div class="info"><span>高级</span> · 1125人在学习</div>
</li>
<li>
<img src="images/img1.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="info"><span>高级</span> · 1125人在学习</div>
</li>
<li>
<img src="images/img1.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="info"><span>高级</span> · 1125人在学习</div>
</li>
<li>
<img src="images/img1.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="info"><span>高级</span> · 1125人在学习</div>
</li>
<li>
<img src="images/img1.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="info"><span>高级</span> · 1125人在学习</div>
</li>
<li>
<img src="images/img1.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="info"><span>高级</span> · 1125人在学习</div>
</li>
<li>
<img src="images/img1.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="info"><span>高级</span> · 1125人在学习</div>
</li>
<li>
<img src="images/img1.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="info"><span>高级</span> · 1125人在学习</div>
</li>
<li>
<img src="images/img1.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="info"><span>高级</span> · 1125人在学习</div>
</li>
</ul>
</div>
</div>
<!-- box核心区域结束 -->
<!-- 我：核心区域right 开始 -->
<!-- <div class="right w">
<div class="hd">
<div class="hd-left">精品推荐</div>
<div class="hd-right">查看全部</div>
</div>
<div class="content">
<ul>
<li>
<a href="#">
img是行内元素，只不过可设置宽高
<img src="images/img1.png" alt="">
此处应用h4语义更清晰
<p class="content-p1">Think PHP 5.0 博客系统实战项目演练</p>
此处用 或者直接空格都行
<p class="content-p2"><span>高级</span> · 1125人在学习</p>
</a>
</li>
</div> -->
<!-- 我：核心区域right 结束 -->/* box核心区域开始 */
/* ①如果有左浮右浮先把这个一并写好，以及大盒子上边距 ，先把外框架答出来;再定每个部分的字体颜色等*/
.box {
margin-top: 30px;
}
.box-hd {
height: 40px;
}
.box-hd h3 {
float: left;
font-size: 20px;
color: #494949;
}
.box-hd a {
float: right;
font-size: 12px;
color: #a5a5a5;
margin-top: 10px;
margin-right: 30px;
text-decoration: none;
}
/* ②因为设置li外边距后，会挤下来两个，所以需要去掉最右边li的外右边距，但是若有很多的li，那挨个去掉很麻烦，
所以只要将ul足够宽，能放下五个li即可。ul的宽度计算：一个li宽230，加上外边距15px为245，共5个，再乘5为1225px。
因为li设置float了，而ul是块元素，所以只要一行的li就是一个ul。
如果ul设置float，li没设置，ul还是竖直排开；ul设置float，li设置了float，或如果ul未设置float，li设置了，会很多li放一行作为一个ul；*/
.box-bd ul {
width: 1225px;
/* overflow: hidden;⑨实际中还是常用双伪元素清除浮动的方法 */
/* ⑧其实box-bd大盒子没有设置高度，子盒子li有高度，但是浮动，应让父盒子高度随着子盒子自适应，应清除浮动，不然下面再写标准流会到上面去，
在浮动盒子的父盒子上添加此句，优点比较简便，缺点溢出父盒子的部分不显示 */
}
.box-bd ul li{
float: left;
width: 228px;
height: 270px;
background-color: #fff;
margin-right: 15px;
margin-bottom: 15px;
}
.box-bd ul li img {
width: 100%;
/* ③li的宽度是228，但是图片是232，如果直接加进图片会多出来，所以要将图片宽度设置100%，和父盒子一样宽，高自适应 */
}
/* ④下面两部分文字内容直接每个设置margin即可 */
/* ⑦h4和.info都是块级元素，设置外边距后，本身的宽度高度自动变小，感觉像是内容的宽高度，像内容大小自适应的感觉，要是不设置边距，会充满盒子；
其实就是块级元素设置外边距后，宽高度就是文字内容本身的宽高度，它是两个盒子之间的距离，设置内边距，宽高度就是文字内容加上padding后的宽高度，它是一个盒子内部距离 */
.box-bd ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
color: #050505;
font-weight: 400;
}
.box-bd .info {
margin: 0 20px 0 25px;
font-size: 12px;
color: #999999;
}
.box-bd .info span {
color: #ff7c2d;
}
/* ⑥把info的颜色设置好后，再设置特殊的，也就是先设置父的，再设置小的 */
/* box核心区域结束 */
/* 我：核心区域 right
.right {
height: 640px;
background-color: pink;有时候有点迷糊的时候,给大盒子加上背景会好很多
}
类选择器命名时最好不要用标签名，很容易混淆，写错，前面易不加点
.right .hd {
height: 20px;此处可设置文字高加下边距高之和，不分别设置
margin-top: 35px;
margin-bottom: 12px;此处下边距不用设置，只需定大盒子的高度即可，这样就包括文字本身的高度以及下边距了
此处可能出现相邻块元素垂直外边距的合并，只给一个盒子添加margin值；但其实没出现，为外边距之和
}
.right .hd .hd-left {
float: left;
font-size: 20px;
color: #494949;
}
.right .hd .hd-right {
float: right;
font-size: 12px;
color: #a5a5a5;
margin-right: 32px;
margin-top: 8px;
}
.right .content {
height: 555px;
}
.right .content ul li {
float: left;
width: 232px;并不是图片的宽度，而是要设置图片宽度和父盒子宽一致
height: 271px;
margin-right: 10px;
margin-top: 10px;设置bottom即可，上边距在上个标题的盒子的高度已经包括了
background-color: #fff;
}
.right .content ul .li1 {
margin-right: 0;不必挨个设置最右li的右边距，如果li很多，就很麻烦，通过ul宽度设置
}
.right .content ul li a
{
display: inline-block;
text-decoration: none;
}
a的content中不用放那么多盒子，就放三个盒子img和h4和div，分别设置各个margin也行；
.content a p {
padding: 20px 25px 0;通过每部分文字设置margin即可，每部分文字标签不同
}
.content a .content-p1 {
color: #000;
font-size: 14px;
}
.content a .content-p2 {
color: #999999;
font-size: 12px;
}
.content a .content-p2 span {
color: #ff7c2d;
} */
其中hot和new要用定位做。
【制作footer模块】
<!-- 我：footer区域开始 -->
<!-- ①此结构类似banner，下面整个部分是一个盒子，里面内容在版心部分，是一个盒子，再包含左右两小部分 -->
<div class="footer">
<div class="footer-w w">
<div class="intro">
<img src="images/logo.png" alt="">
<p class="itd">
学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
<br>
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号
</p>
<a class="app">
下载APP
</a>
</div>
<div class="about">
<!-- ③此处它是用dl来做，包括dt和dd，dd里面包括的都是链接 -->
<dl>
<dt>关于学成网</dt>
<dd><a href="#">关于</a></dd>
<dd><a href="#">管理团队</a></dd>
<dd><a href="#">工作机会</a></dd>
</dl>
<dl>
<dt>新手指南</dt>
<dd><a href="#">如何注册</a></dd>
<dd><a href="#">如何拿到毕业证</a></dd>
<dd><a href="#">如何选课</a></dd>
</dl>
<dl>
<dt>合作伙伴</dt>
<dd><a href="#">合作机构</a></dd>
<dd><a href="#">合作导师</a></dd>
</dl>
<!--<div class="about-all"②此处不用从后向前写，从右向左写，而是从左向右写，只要把dl设置为左浮而不是右浮即可>
<h4>合作伙伴</h4>
<ul>
<li>合作机构</li>
<li>合作导师</li>
</ul>
</div>
<div class="about-all">
<h4>新手指南</h4>
<ul>
<li>如何注册</li>
<li>如何选课</li>
<li>如何拿到毕业证</li>
<li>如何注册</li>
<li>如何注册</li>
</ul>
</div>
<div class="about-all">
<h4>关于学成网</h4>
<ul>
<li>关于</li>
<li>管理团队</li>
<li>工作机会</li>
<li>如何注册</li>
<li>如何注册</li>
</ul>
</div> -->
</div>
</div>
</div>
<!-- 我：footer区域结束 --> /* 我：footer区域开始 */
.footer {
height: 419px;
background-color: #fff;
/* padding-top: 30px;或者用这个来清除外边距影响 */
overflow: hidden;
}
.footer .footer-w {
/* ①此处父盒子footer上面有之前核心部分box设置的下边距10px，这个无妨，相当于父盒子的上边距为0，现在子盒子设置一个上边距32px，父盒子会被带下来，
父盒子和子盒子footer-w上边界重合，父盒子外面的上边距变成0和32最大的那个，也就是32px，现在父盒子上边的空白处是42px。
解决方法，设置父盒子的内边距或者overflow:hidden
另外：如果版心子盒子是浮动的，那么设置就不会出现外边距合并的现象*/
margin-top: 32px;
}
/* ②其他知识：img是行内块元素，input、select、textarea都是行内块元素，它设置上下边距有效，其他行内元素不是不能设置上下边距，而是设置后布局里面体现不出来，无效所以索性不设置 */
.intro {
float: left;
margin-left: 20px;
}
.intro p {
margin: 23px 0 15px 0;
font-size: 12px;
color: #666666;
}
/* ④它是一个链接 */
.intro .app {
/* 加个这个，转成块*/
display:block;
width: 120px;
height: 35px;
line-height: 35px;
text-align: center;
font-size: 16px;
color: #00a4ff;
border: 1px solid #00a4ff;
}
.about {
float: right;
margin-right: 32px;
/* background-color: pink; */
/* ④没事写上背景比较方便 */
}
/* ③float属性没有继承性，相当于行内块元素，不放东西宽度为0，里面可放块元素，放了东西就随着里面的内容来撑开
其父盒子的宽度就是最大子盒子的宽度 */
/* ⑤links这里用dl列表来做包括dt和dd ，这个dl就包括了三个部分，就不用单独分别给盒子里面放标题h和ul来做了
而是dl包括三个部分，里面的dt是h部分，dd是ul部分即可*/
.about dl {
/* float: right;④此处是一个左浮动，而不是右浮动，如果是右浮动，首先父盒子about是右浮动，再设置右浮动的话，则
在html结构中在前面写的内容首先会放到最右边来显示；而如果父盒子about设置有浮动，里面的dl设置左浮，那么写的内容会从左向右排开 */
float: left;
margin-left: 120px;
}
/* .about-all h4 { 这里改一下用dt*/
.about dl dt {
margin-bottom: 14px;
font-size: 16px;
color: #7c7777;
}
/* .about-all ul li { */
.about dl dd a {
margin-bottom: 8px;
font-size: 12px;
color: #333;
/* text-decoration: none; */
}
/* 我：footer区域结束 */
/* footer区域开始 */
/* .footer {
height: 415px;
background-color: pink;
}
.footer .w {
margin-top: 35px;②此时版心一个外边距，会外边距的合并问题，所以应换成padding就好了，或者给父盒子加padding也行
padding-top:35px;
}
③浮动的盒子不用给宽度，自动检测
.copyright {
float: left;
}
.links {
float: right;
} */
/* footer区域结束 */我：
实际：
扫一扫
809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
