百度前端学院第9-11天(4)

最新推荐文章于 2024-08-13 17:13:54 发布
最新推荐文章于 2024-08-13 17:13:54 发布
阅读量178 收藏
点赞数
文章标签： css css3 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43274526/article/details/105591165
版权

第九天到第十一天：来做一个漂亮的网站

step1:

做了第一个页面，切图，写HTML,再写CSS

html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>切图侠</title>
<link rel="stylesheet" href="css/demo1.css">
</head>

<body>
<header>
<div class="header-wrap">
<div class="firstContent">
<div class="header-title">Hello World</div>
<p>China is speeding up strategic plan, standards, traffic rules, laws and regulations</p>
<p>on accident-incurred liabilities for its smart car industry, Economic Information</p>
<p>Daily reported Thursday.</p>
<div class="form-wrap">
 <p>CREATE YOUR ACCOUNT</p>
 <p>IT IS ABSOLUTELY FREE</p>
 <ul>
   <input type="text" placeholder="denis@getcraftwork.com">
   <input type="text" placeholder="Create your password">
   <button class="sign">SIGN UP</button>
 </ul>
</div>
</div>
</div>
</header>
</body>

</html>

CSS

body {
margin: 0;
padding: 0;
font-family: "Montserrat-ExtraLight";
}

h1 {
margin: 0;
}

.header-wrap {
width: 100%;
height: 990px;
background-image: url(../img/7.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: local;
background-size: cover;
position: relative;
}

/* 使div块居中 */
.firstContent {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
box-sizing: border-box;
width: 1000px;
height: 600px;
}

.header-title {
text-align: center;
font-weight: 300;
font-size: 60px;
margin-bottom: 80px;
}

.firstContent p {
text-align: center;
line-height: 20px;
}

.form-wrap {
box-sizing: border-box;
border: 1px solid white;
width: 1000px;
height: 300px;
margin-top: 100px;
padding-top: 50px;
border-radius: 3px;
}

.form-wrap ul {
text-align: center;
margin-top: 40px;
}

.form-wrap input {
display: inline;
background-color: transparent;
width: 250px;
text-align: left;
margin: 20px;
font-size: 15px;
padding: 15px;
border-radius: 5px;
border: 1px solid white;
}

.sign {
display: inline;
background-color: transparent;
width: 100px;
text-align: left;
margin: 20px;
font-size: 15px;
padding: 15px;
border-radius: 5px;
border: 1px solid white;
background-color: white;
}

.sign:hover {
color: aquamarine;
}

++++++

**更新:**第二个页面的实现

html

<!-- 第二个 -->
<section>
<div class="second">
<div class="second-wrap">
  <div class="above">
    <p>BOATLADS OF AWESOME</p>
    <p>Ready-made, customizable, HTML<br>landing page sections</p>
  </div>
  <div class="below">
    <div class="one">
      <div class="logo"><img src="img/01.png" alt="logo"></div>
      <div class="intro">
        <p>Mobile first</p>
        <p>All modulz are built mobile-first for maximum device<br> compatibility.</p>
      </div>
    </div>

    <div class="two">
      <div class="logo"><img src="img/02.png" alt="logo"></div>
      <div class="intro">
        <p>Fluid Typography</p>
        <p> On different screen sizes, fonts automagically<br> scale with the viewport.</p>
      </div>
    </div>

    <div class="three">
      <div class="logo"><img src="img/03.png" alt="logo"></div>
      <div class="intro">
        <p>Accessibility</p>
        <p> Support for IE8, mobile and tablet devices, scr<br>eenreaders and c.</p>
      </div>
    </div>

    <div class="four">
      <div class="logo"><img src="img/04.png" alt="logo"></div>
      <div class="intro">
        <p>Customization</p>
        <p> Make any design your own using the Style E<br>ditor. Personalize fo</p>
      </div>
    </div>

  </div>
</div>
</div>
</div>
</section>

css

/* 第二部分 */
.second {
width: 100%;
height: 700px;
position: relative;
}

.second-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 800px;
height: 600px;
}

.above {
text-align: center;
margin-bottom: 100px;
width: 800px;
}

.above p:nth-child(1) {
font-size: 12px;
font-weight: 300;
}

.above p:nth-child(2) {
font-size: 24px;
font-weight: 300;
margin-top: 12px;
}

.below {
position: relative;
height: 300px;
width: 800px;
}

.one {
position: absolute;
top: 0;
left: 0;

}

.two {
position: absolute;
top: 0;
right: 0;
}

.three {
position: absolute;
bottom: 0;
left: 0;
}

.four {
position: absolute;
bottom: 0;
right: 0;
}

.logo {
display: inline-block;
position: relative;

}

.intro {
display: inline-block;
margin-left: 20px;
}

.intro p:nth-child(1) {
font-size: 16px;
margin: 0 0 2px 0;
}

.intro p:nth-child(2) {
font-size: 12px;
font-weight: 300;
margin: 0;
}

.two img {
margin-bottom: 12px;
}

.four img {
margin-bottom: 4px;
}

**更新:**第三个页面的实现

html

<!-- 第三部分 -->
<section>
 <div class="third">
   <div class="third-wrap">
     <div class="third-wrap-left">
       <!-- <div class="third-wrap-left-text"> -->
       <p style="color: white;">Supportive policies<br> for China's smart car</p>
       <p style="color: white;">China will come up with its own smart car<br> standards, traffic
         rules, laws and regulations<br>relatingto safety, according to the China<br> Industry Innovation
         Alliance for the Intell-<br>igent andConnectedVehicles.</p>
       <input type=" button" value="CHECK OUT FEATURES">
       <input type="button" value="TRY PRODUCT FOR FREE">
       <!-- </div> -->
     </div>
     <!-- <div class="third-wrap-right">
       <img src="img/Screen.jpg" alt="pic">
     </div> -->
   </div>
   <!-- 写在这，好定位 -->
   <div class="third-wrap-right">
     <img src="img/Screen.jpg" alt="pic">
   </div>
 </div>
</section>

css

.third {
width: 100%;
height: 800px;
background-image: url(../img/02.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: local;
background-size: cover;
position: relative;
}

.third-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 1000px;
}

.third-wrap-left {
float: left;
width: 400px;
margin-top: 200px;
}


.third-wrap-right {
float: right;
margin-top: 120px;
border: 1px solid white;
border-radius: 10px 0 0 10px;
padding: 30px 0 30px 40px;
}

.third-wrap-left p:nth-child(1) {
font-size: 35px;
font-weight: 300;
}

.third-wrap-left p:nth-child(2) {
font-size: 16px;
font-weight: 200;
margin-bottom: 100px;
}

.third-wrap-left input:nth-of-type(1) {
width: 180px;
height: 50px;
border: 1px white solid;
padding: 0;
margin: 0;
text-align: center;
}

.third-wrap-left input:nth-of-type(1):hover {
color: chartreuse;
}

.third-wrap-left input:nth-of-type(2) {
width: 180px;
height: 52px;
border: 1px white solid;
padding: 0;
margin: 0 0 0 10px;
text-align: center;
background-color: transparent;
color: white;
}

.third-wrap-left input:nth-of-type(2):hover {
color: chartreuse;
}

**更新:**第四、五个页面的实现

html

<!-- 第四部分 -->
  <section>
    <div class="forth">
      <div class="forth-wrap">
        <div class="forth-wrap-top">
          <p>Try Our Awesome Products</p>
        </div>
        <div class="forth-wrap-bottom">
          <div class="forth-wrap-bottom-left">
            <div class="forth-wrap-bottom-left-pic"><img src="img/Singleton.png" alt="Singleton"></div>
            <div class="forth-wrap-bottom-left-text">
              <p>Li Jun, a China Academy of Engi-<br>neering academician and also<br> director of the alliance's
                experts'<br>committee, said that China will<br> also launch design guidance for<br> smart cars, smart
                map architec-<br>ture andstandards for test grounds.</p>
            </div>
          </div>

          <div class="forth-wrap-bottom-middle">
            <div class="forth-wrap-bottom-middle-pic"><img src="img/Hero.png" alt="Hero"></div>
            <div class="forth-wrap-bottom-middle-text">
              <p>Li said the smart car industry is<br> able to enlarge the current car<br> industry by 1 trillion yuan
                ($158.15<br>billion) and also able to boost fast<br> development in 5G, internet of<br> cars, big data,
                artificial intelligence<br> and new-energy vehicles.</p>
            </div>
          </div>

          <div class="forth-wrap-bottom-right">
            <div class="forth-wrap-bottom-right-pic" right><img src="img/Portland.png" alt="Portland"></div>
            <div class="forth-wrap-bottom-right-text">
              <p>Zhang Junyi, a partner with NIO<br> Capital, said that the smart car is<br> the trend for the car
                industry and<br>China's auto sector will usher in a<br> new key development stage with<br> the
                improvement of infrastructure,<br>technology, policies and laws.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- 第五部分 -->
  <hr>
  <section>
    <div class="fifth">
      <div class="fifth-wrap">
        <div class="fifth-wrap-top">
          <div class="fifth-wrap-top-pic">
            <img src="img/图层 3.png" alt="">
          </div>
          <div class="fifth-wrap-top-text">
            <p>Learn How to Improve Your<br> Personal Business</p>
            <p>Li Jun, a China Academy of Engineering<br> academician and also director of the<br> alliance's experts'
              committee, said that<br> China will also launch design guidance<br> for smart cars, smart map
              architecture<br> and standards for test grounds.</p>
          </div>
        </div>
        <div class="fifth-wrap-bottom">
          <div class="fifth-wrap-bottom-text">
            <p>Choose Between Two Beautifully<br> Designed Color Schemes.</p>
            <p>China will come up with its own smart<br> car standards, traffic rules, laws and re-<br>gulations
              relating to safety, according <br>to the China Industry Innovation Alliance<br> for the Intelligent and
              Connected Vehicles.
            </p>
          </div>
          <div class="fifth-wrap-bottom-pic">
            <img src="img/图层 4.png" alt="pic">
          </div>
        </div>
      </div>
    </div>
  </section>

css

/* 第四部分 */
.forth {
  width: 100%;
  height: 600px;
  position: relative;
}

.forth-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 1000px;
}

.forth-wrap-top {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 100px;
}

.forth-wrap-top p {
  font-size: 24px;
  font-weight: 300;
}

.forth-wrap-bottom {
  position: relative;
}

.forth-wrap-bottom-left,
.forth-wrap-bottom-middle,
.forth-wrap-bottom-right {
  position: absolute;
}

.forth-wrap-bottom-left {
  top: 20px;
  left: 0px;
}

.forth-wrap-bottom-middle {
  top: 20px;
  left: 50%;
  transform: translate(-50%);
}

.forth-wrap-bottom-right {
  top: 20px;
  right: 0;
}

.forth-wrap-bottom-left-pic,
.forth-wrap-bottom-middle-pic,
.forth-wrap-bottom-right-pic {
  text-align: center;
  margin-bottom: 60px;
}

.forth-wrap-bottom-left-text,
.forth-wrap-bottom-middle-text,
.forth-wrap-bottom-right-text {
  text-align: center;
  font-weight: 300;
}

/* 第五部分 */
.fifth {
  width: 100%;
  height: 1000px;
  position: relative;
}

.fifth-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 1000px;
  display: flex;
  flex-direction: column;
}

.fifth-wrap-top {
  position: relative;
  height: 400px;
  margin-top: 100px;
  margin-bottom: 60px;
}

.fifth-wrap-top-pic {
  position: absolute;
}

.fifth-wrap-top-text {
  position: absolute;
  top: 20%;
  right: 0;
  text-align: center;
}

.fifth-wrap-top-text p:nth-child(1) {
  font-size: 20px;
}

.fifth-wrap-top-text p:nth-child(2) {
  font-size: 12px;
  font-weight: 300;
}

.fifth-wrap-bottom {
  position: relative;
  height: 400px;
}

.fifth-wrap-bottom-pic {
  position: absolute;
  right: 0;
  top: 0;
}

.fifth-wrap-bottom-text {
  position: absolute;
  top: 20%;
  text-align: center;
}

.fifth-wrap-bottom-text p:nth-child(1) {
  font-size: 20px;
}

.fifth-wrap-bottom-text p:nth-child(2) {
  font-size: 12px;
  font-weight: 300;
}
weixin_user911
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
百度前端技术学院25-27学习笔记
MING23333的博客
10-10 208
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 JavaScript 函数语法 函数就是包裹在花括号中的代码块，前面使用了关键词 function： function functionname() { 这里是要执行的代码 } 当调用该函数时，会执行函数内的代码。 JavaScript 变量的生存期 JavaScript 变量的生命期从它们被声明的时间开始。 局部变量会在函数运行...
百度前端技术学院--零基础--第四天：背景边框列表链接和更复杂的选择器
m0_45317318的博客
07-18 347
第四天 背景边框列表链接和更复杂的选择器 课程目标 掌握CSS稍微复杂的一些选择器，还有背景，边框等一些CSS样式属性 课程描述 复习 CSS的基本概念，基本的选择器，以及关于字体的一些样式设置。 阅读一 在学习枯燥难懂的盒模型之前，我们先学习一些简单的 W3School-背景 MDN-什么是背景 阅读笔记 1.CSS 背景 背景色 可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。 这条规则把元素的背景设置为灰色： p {background-colo
百度前端学院第9-11天完结版
weixin_43274526的博客
04-18 184
百度前端学院第9-11天的任务，花了2天实现了一下，有些小细节没有做，后续完善，大家多多支持。
百度前端技术学院，第11-15天任务完结版
weixin_43274526的博客
04-20 202
百度前端学院第11-15天的任务，参考网上的学习资源，花了2天时间复现一下。参考地址：https://www.jianshu.com/p/52d3d8b7d46f
百度前端技术学院--零基础--第三天：让简历有点色彩
m0_45317318的博客
07-04 182
百度前端技术学院–零基础–第三天：让简历有点色彩 课程目标 初步了解什么是CSS，掌握基本的CSS概念，语法，学习如何设置一些简单的样式 任务描述 打开昨天编辑的 Codepen，在中间CSS的窗口，加上下面的代码 h2{ font-size: 32px; } li { color: orange; } 阅读（一） 1.阅读MDN的文字样式，先看看字体颜色，种类几个基础的属性设置。 2.W3School中的文字样式部分和W3School字体部分 阅读笔记 1.颜色 color 属性设置选中
百度前端学院第9到11天
qq_40891002的博客
05-13 167
写这个页面的时候自己竟然写了300多行css,什么代码的复用什么的都没用用到，用到最笨的方法，一个页面一个页面老老实实的写 ，觉得几种布局方式确实有效，3天我也确实没做完，用了大概5天左右，权当记录一下了，毫无参考价值，总之慢慢变好，慢慢学 习吧 HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>完美的网页</title> &lt
百度前端技术学院--零基础--第七天到第八天：学习布局
m0_45317318的博客
08-18 321
第七天到第八天：学习布局 课程目标 通过大量练习，来学习布局的各种方式 阅读 MDN定位 MDN定位实战 MDN Flexbox 学习CSS布局 CSS布局(三) 布局模型 CSS布局(四) Float CSS布局(五) 网页布局方式 CSS布局(六) 对齐方式 七种实现左侧固定，右侧自适应两栏布局的方法 圣杯布局 双飞翼布局 圣杯布局和双飞翼布局 CSS深入理解流体特性和BFC特性下多栏自适应布局 三种三栏网页宽度自适应布局方法 阅读笔记 1.静态定位 静态定位是每个元素获取的默认值——它只是意味着“
百度前端技术学院第二天-简历制作
weixin_30371469的博客
07-08 65
效果图： CSS： 1 * { 2 border: none; 3 padding: 0; 4 margin: 0; 5 color: #2A7B88; 6 } 7 div#allPart { 8 ...
百度前端技术学院 第三天整理（上）
chen983234416的博客
02-25 526
1、用于样式文本的css属性通常可以分为两类 答：1、字体样式：什么类型的字体         2、文本布局风格：文本间距以及其他布局功能的属性 2、color：属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西） 3、text-decoration：放置在文本上方或者下方的线 4、font-family: 表示字体的种类：arial类型的字体可以在任何电脑上找到 ...
Baidu-Web-technology-college-9-11:百度前端技术学院零基础学院第九到十一天源代码
03-24
在本资源"Baidu-Web-technology-college-9-11:百度前端技术学院零基础学院第九到十一天源代码"中，我们可以深入学习百度前端技术学院为初学者设计的一系列课程内容。这个压缩包包含了从第九天到第十一天的学习材料，...
百度Web前端技术学院-javascript
06-21
百度Web前端技术学院（Baidu Institute of Front-End Technology简称IFE）是一个由百度人力资源部校园招聘组、百度EFE团队联合出品的、面向在校大学生以及对前端技术有兴趣的前端在线学习平台，我们希望能够借助百度...
百度前端研发笔试卷-教程与笔记习题
05-18
【标题】：“百度前端研发笔试卷-教程与笔记习题”揭示了这是一份与百度公司前端开发岗位相关的笔试题目集。这份资料可能是为应聘者准备的，旨在测试他们对前端开发技术的理解和应用能力。 【描述】：“百度前端...
ife2016-spaceplane:百度前端技术学院2016Spring班任务
03-29
百度前端技术学院2016Spring班任务：行星与飞船 在线演示 任务内容 第一阶段 然后（打开查看），创建一个虚拟宇宙，包括一个行星和飞船 每个飞船由以下部分组成 动力系统，可以完成飞行和停止飞行两个行为，暂定所有...
dnd:百度前端学院 - 队不队 项目
05-19
队不队（DND）团队是百度前端学院2015年暑假训练营WebApp班的一个自成立团队，团队成员共六名，皆致力于自学前端开发相关开发技术！ 项目说明 本项目系微型项目，主体为单一项目页面，主要包含DND团队展示及团队成员...
css实现水滴效果图
yinge0508的博客
08-12 743
【代码】css实现水滴效果图。
怎么在 tailwindcss 项目中自定义一些可复用的样式
前端原创分享，常年坚持记录和分享，全网阅读量超百万
08-08 225
这些方法可以帮助你创建可复用的自定义样式,同时保持与 Tailwind 的一致性。选择哪种方法取决于你的具体需求和项目结构[1][2][4][5]。
CSS——伪元素&:before
qq_43730272的博客
08-13 154
:after和::before的使用很简单，可以认为其所在元素上存在一前一后的两个的元素，这两个元素默认是内联元素，但我们可以为其增添样式。::after和::before使用的时候一定要注意，必须设置content，否则这两个伪元素是无法显示出来的。而content属性，会作为这两个伪元素的内容嵌入他们中。
纯css实现多行文本右下角最后一行展示全部按钮
最新发布
qq_59625204的博客
08-13 142
最主要的是使用伪元素before把按钮顶下来，始终在最后一行。综上演示按钮始终保持在最下方。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值