这个代码有问题
来源：2-12 空间移动
情分的小前端
2020-12-02 15:17:50
# 具体遇到的问题
浏览器变大变小直接乱了，还有这里的按钮应该用button好一些还是input啊
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Keywords" content="旅游，团购，舒服">
<meta name="Description" content="是最好的旅游机构，提供最好的服务，最巴适的环境">
<link rel="stylesheet" href="css/cssHomeWork.css">
<title>Trip</title>
</head>
<body>
<!-- 页头 -->
<header class="Header">
<div class="header-top">
<!-- logo -->
<div class="logo">
<h1><a href="">Career Builder</a></h1>
</div>
<!-- 功能区 -->
<div class="tool">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">GALLERY</a></li>
<li><a href="">FACULTY</a></li>
<li><a href="">EVENTS</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
</div>
</header>
<!-- banner -->
<section class="banner">
<!-- 图片区 -->
<div class="Photo">
<img src="images/banner3.jpg" alt="" srcset="">
</div>
<!-- 遮罩层 -->
<div class="Shade">
</div>
<!-- 表单 -->
<div class="Form">
<form action="">
<input type="text" placeholder="your name">
<input type="text" placeholder="your Phone">
<input type="text" placeholder="your Email">
<!-- <input type="text" placeholder="Write Your Content Here"> -->
<textarea placeholder="Write Your Content Here"></textarea>
<!-- <input type="text" placeholder="SEND MESSAGE"> -->
<button value="SEND MESSAGE">SEND MESSAGE</button>
</form>
</div>
</section>
<!-- 网页主要内容 -->
<section>
<!-- about -->
<div class="about">
<!-- 标题,简单描述 -->
<div class="Tit-des">
<div class="Tit">
<h2>ABOUT</h2>
<span></span>
</div>
<div class="Des">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
<p>industry.Lorem Ipsum has been the industry's standard dummy</p>
<p>text ever since the 1500s.</p>
</div>
</div>
<!-- 详细描述detailed-->
<div class="Det-about">
<div class="lef-words">
<p>
<h2>A WORD</h2>
</p>
<p>
<h2>ABOUT US</h2>
</p>
</div>
<form class="lef-box-fom">
<p>Praesent dignissim viverry est,sed</p>
<p>bibendum ligula congue non.Sed</p>
<p>ac nisl et feils gravida commodo?</p>
<p>Suspendiss eget ullamcorper</p>
<p>ipsum.Suspendisse diam armet.</p>
<input type="button" value="EXPLORE"></input>
</form>
<div class="rit-number">
<div class="up">
<h2>70000</h2>
<span></span>
<p>Students</p>
</div>
<div class="down">
<h2>600</h2>
<span></span>
<p>Faculty</p>
</div>
</div>
<div class="centu">
<img src="images/b1.jpg">
</div>
</div>
</div>
<!--图文混排区 -->
<div class="Ph-tit">
<div class="Ph-tit-1">
<div class="Ph_1">
<!-- <img src="images/b1.jpg" alt="" srcset=""> -->
</div>
<form class="tit_1">
<h2>Library</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<input type="button" value="EXPLORE">
</form>
</div>
<div class="Ph-tit-1">
<div class="tit_1">
<h2>Library</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<input type="button" value="EXPLORE">
</div>
<div class="Ph_1">
<!-- 图片2 -->
</div>
</div>
<div class="Ph-tit-1">
<div class="Ph_1">
<!-- 图片3 -->
</div>
<div class="tit_1">
<h2>Library</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<input type="button" value="EXPLORE">
</div>
</div>
<div class="Ph-tit-1">
<div class="tit_1">
<h2>Library</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<input type="button" value="EXPLORE">
</div>
<div class="Ph_1">
<!-- 图片4 -->
</div>
</div>
</div>
<!-- Gallery -->
<div class="Gallery">
<!-- 标题,简单描述 -->
<div class="Tite-dese">
<div class="Tite">
标题
</div>
<div class="Dese">
简单描述
</div>
</div>
<!-- 详细描述detailed-->
<div class="Det-Gallery">
详细描述
</div>
</div>
</section>
<!-- Footer -->
<footer class="Footer">
<p>©2016 imooc.com 京ICP备13046642号</p>
</footer>
</body>
</html>
* {
margin: 0;
padding: 0;
}
a,
li {
list-style: none;
text-decoration: none;
}
@font-face {
font-family: 'webfont';
font-display: swap;
src: url('//at.alicdn.com/t/webfont_457xrv6gssx.eot');
/* IE9*/
src: url('//at.alicdn.com/t/webfont_457xrv6gssx.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/webfont_457xrv6gssx.woff2') format('woff2'), url('//at.alicdn.com/t/webfont_457xrv6gssx.woff') format('woff'), /* chrome、firefox */
url('//at.alicdn.com/t/webfont_457xrv6gssx.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/webfont_457xrv6gssx.svg#AlibabaPuHuiTiH') format('svg');
/* iOS 4.1- */
}
/* 头部开始 */
.Header {
height: 80px;
width: 100%;
background-color: #07cbc9;
}
.header-top {
margin: 0 auto;
height: 80px;
width: 1200px;
overflow: hidden;
background-color: #07cbc9;
}
.header-top .logo {
float: left;
height: 64px;
/* width: 600px; */
padding-top: 16px;
/* line-height: 80px; */
}
.header-top .logo a {
height: 48px;
color: #fff;
}
.header-top .logo h1 {
height: 48px;
line-height: 48px;
font-family: 'webfont';
font-weight: normal;
}
.header-top .tool {
padding-top: 16px;
float: right;
/* width: 600px; */
height: 64px;
}
.header-top .tool ul {
height: 48px;
}
.header-top .tool ul li {
/* height: 48px;
width: 83px; */
margin-right: 20px;
line-height: 48px;
display: inline-block;
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
}
.header-top .tool ul li:last-child {
margin-right: 0;
}
.header-top .tool ul li a {
color: #fff;
/* display: block;
height: 48px;
width: 83px; */
}
/* banner开始 */
.banner {
position: relative;
height: 600px;
width: 100%;
}
.banner .Photo {
height: 600px;
}
.banner .Photo img {
height: 600px;
width: 100%;
}
.banner .Shade {
position: absolute;
height: 600px;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .4);
}
.Form {
position: absolute;
height: 410px;
width: 504px;
top: 50%;
left: 50%;
margin-top: -205px;
margin-left: -252px;
/* background-color: blue; */
}
.Form form {
height: 410px;
width: 504px;
}
.Form form input,
textarea,
button {
color: #808080;
border: 2px solid #808080;
height: 40px;
width: 500px;
margin: 0 auto;
display: block;
margin-bottom: 20px;
background: none;
outline: none;
}
.Form form textarea {
width: 500px;
height: 110px;
resize: none;
}
.Form form button {
text-align: center;
width: 200px;
height: 40px;
margin-bottom: 0;
cursor: pointer;
}
/* .Form form input:last-child {
text-align: center;
width: 200px;
height: 40px;
margin-bottom: 0;
} */
/* .Form form input:nth-last-child(2) {
width: 500px;
height: 110px;
} */
/*网页主要内容开始 */
.about {
width: 1201px;
margin: 0 auto;
}
.Tit-des {
width: 1200px;
text-align: center;
margin-top: 30px;
}
.Tit-des .Tit span {
display: block;
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.Tit-des .Tit h2 {
font-size: 32px;
}
.Tit-des .Des p {
font-size: 14px;
color: #808080;
}
.Det-about {
width: 1201px;
height: 464px;
padding-top: 30px;
/* text-align: center; */
position: relative;
/* overflow: hidden; */
}
.Det-about .centu {
margin: 0 auto;
width: 650px;
height: 435px;
}
.Det-about .centu img {
width: 650px;
height: 435px;
/* margin: 0 auto; */
}
.Det-about .lef-words {
text-align: left;
display: inline;
float: left;
overflow: hidden;
}
.Det-about .lef-box-fom {
position: absolute;
text-align: left;
width: 300px;
/* height: 240px; */
top: 50%;
left: 0;
margin-top: -120px;
padding: 20px;
border: 1px solid gray;
background-color: rgba(255, 255, 255, .5);
}
.Det-about .lef-box-fom p {
font-size: 18px;
}
.Det-about .lef-box-fom input {
width: 140px;
height: 40px;
color: white;
font-size: 18px;
margin-top: 26px;
border: none;
background-color: rgb(0, 0, 0);
}
.Det-about .rit-number {
position: absolute;
right: 0px;
}
.Det-about .rit-number .up,
.down {
width: 260px;
text-align: center;
padding: 40px 0;
border: 1px solid #07cbc9;
}
.Det-about .rit-number .up,
.down h2 {
font-size: 28px;
}
.Det-about .rit-number .up {
margin-bottom: 20px;
}
/* .Det-about .rit-number .down h2 {
font-size: 28px;
} */
.Det-about .rit-number .up span {
display: block;
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.Det-about .rit-number .down span {
display: block;
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
/* 图文混排区开始 */
.Ph-tit {
width: 100%;
overflow: hidden;
}
.Ph-tit .Ph-tit-1 {
height: 760px;
float: left;
/* width: 380px; */
/* margin-right: 0; */
}
.Ph-tit .Ph-tit-1 .Ph_1 {
height: 380px;
width: 380px;
background: url(../images/b1.jpg) no-repeat;
/* background-size: 420px 420px; */
background-size: cover;
}
.Ph-tit .Ph-tit-1 .tit_1 {
height: 340px;
width: 340px;
background-color: #07cbc9;
padding: 20px;
}
.Ph-tit .Ph-tit-1 .tit_1 h2 {
margin-bottom: 30px;
color: white;
}
.Ph-tit .Ph-tit-1 .tit_1 p:nth-of-type(1) {
font-size: 17px;
margin-bottom: 20px;
color: white;
}
.Ph-tit .Ph-tit-1 .tit_1 p:nth-of-type(2) {
font-size: 13px;
color: gray;
margin-bottom: 30px;
}
.Ph-tit .Ph-tit-1 .tit_1 input {
width: 138px;
height: 40px;
background-color: black;
color: white;
border: none;
margin: 0 100px;
}
代码，可通过选择【代码语言】突出显示
1回答
-
好帮手慕久久
2020-12-02
同学你好，由于当前阶段我们没有学习适配，所以只要能保证页面在全屏下正常显示即可。由于没有做适配，所以页面宽度变化后，效果就会乱，同学只重点关心全屏下的效果即可。
以图文混排为例，可通过调整样式，让其在页面宽度变化时（宽度在一定范围内变化），效果是正常的，思路如下：
全屏下，页面宽度是100%，一共四列，那么每列宽度设置成25%，就可以全屏显示，具体修改如下：
问题解答如下：
按钮使用input、button都行，二者区别不大，只要实现效果就行。
祝学习愉快！
0
相似问题
回答 2
回答 2