html 任务1.6的要点

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 任务1.6的要点相关的知识，希望对你有一定的参考价值。

* { box-sizing: border-box; }

.jumbotron {
    background-image: url(../img/background.jpg);
    background-size: cover;
    padding-top: 10px;
}


.jumbotron p {
      color: white;
      margin-bottom: 30px;
}

.jumbotron a {
  text-decoration: none;
  color: #ffffff;
}

.jumbotron a:hover {
  text-decoration: none;
  color: #b7b7b7;
}

.jumbotron h1 {
  font-weight: 400;
  font-size: 500%;
  color: #f8f8f8;
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #e8e8e8;
  
}

a:hover {
  color: #34495e;
  transition: color 0.25s;
  -webkit-transition: color 0.25s;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

body {
      color: #fff;
      font-family: 'Lato', sans-serif;
      padding-top: 21px;
}

.container {
    
    width: 80%;
    margin: 0px auto auto auto;
    background-color: #d35400;
  
}

.contact-container {
  background-color: #cbe4f4;
}

.header {
  margin-bottom: 25px;
}

.header h1 {
  color: #fff;
  font-size: 3em;
}

.image {
  display: inline-block;
  float: left;
  padding: 10px;
}

.column-container {
  background-color: #ecf0f1;
}

.column {
  display: inline-block;
  float: left;
  width: 33%;
  padding-right: 10px;
}

.contact-card {
  background-color: #b14600;
  padding: 0;
  margin-right: 0px;
  width: 23%;
  height: auto;
  display: inline;
}

.contact-card-row {
  display: flex;
  justify-content: space-between;
  background-color: #c24d00;
  padding: 10px;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  
}

.contact-card p {
  margin-bottom: 3px;
  margin-top: 2px;
}

.main-text {
        clear: both;
        padding: 40px 20px 20px 20px;
}

.map-row {
  margin: 30px 20%;
  text-align: center;
  width: 60%;
  
}
.contact-image img {
  height: 30px;
}


.map-image-container {
  display: inline;
  height: 450px;
}

.map-image-container img {
  /*background-image: url(../img/map.png);
  background-size: 100%;
  height: 450px;
  background-repeat: no-repeat;*/
  width: 100%;
  margin: 10px;
  border: solid 10px #c24d00;

}

.nav {
  background-color: #d35400;
  position: fixed;
  width: 80%;
  top: 0;
  padding-top: 20px;
}

.nav a {
  display: inline-block;
  color: #fff;
  float: left;
  text-transform: uppercase;
  padding: 10px 15px 10px 50px;
  transition: color 0.25s;
  -webkit-transition: color 0.25s;
}

.nav a:hover {
  color: #34495e;
}

.nav ul {
  margin: 2px 0px;
}
.nav ul li {
  display: inline-block;
 
  float: right;
}

.nav ul li a {
  color: #fff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 15px 10px 0px;

}

.about-image {
  width: 100%;
}

.intro {
  padding: 30px 50px;
}

.skills {
  padding-left: 20px;
  padding-top: 10px;
  margin-top: 55px;
  color: #404040;
  border: 1px solid white;
}


#skill-list {
  padding-left: 50px;
}



/*---typography---*/


h1 {
  font-weight: 300;
  font-size: 3em;
}

.header h1 {
  text-align: center;
}

.intro p {
  font-size: 2em;
  font-weight: 100;
  -webkit-margin-before: 0;
}

.skills h3 {
  margin-top: 0;
  text-align: center;
  text-transform: uppercase;
}

<!doctype html>
<html lang="en">
  <head>
        
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
        
      <title>Contact | Matt Barker</title>
        
      <!--[if lt IE 9]>
        <script src="dist/html5shiv.js"></script>
      <![endif]-->
            <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i" rel="stylesheet">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <div class="container">
    <div class="nav">
      <a href="index.html"><strong>Matt</strong>Barker</a>
      <ul>
        
        <li><a href="about.html">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </div>
    </div>
    <div class="container">
      <div class="header">
        <h1><strong>Contact</strong> Me</h1>
        <div class="main-text"><p>Franzen irony pabst, est esse readymade consequat ugh you probably haven't heard of them health goth etsy eu. Labore offal odio, kickstarter consequat skateboard taxidermy kogi shoreditch heirloom. Non nihil deep v heirloom aute. Roof party man braid meggings shabby chic. Asymmetrical 90's celiac nisi twee neutra.</p></div>
      </div><!--header-->
      <!--<div class="row">-->
      <div class="row contact-card-row">
        <div class="col-md-4 contact-card">
          <h3>Email</h3>
          <div class="contact-image">
            <a href="mailto:matt@mattbarker.net"><img src="img/envelope-8.png"></a>
          </div>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p><a href="mailto:matt@mattbarker.net">matt@mattbarker.net</a></p>
        </div>
        <div class="col-md-4 contact-card">
          <h3>Phone</h3>
          <div class="contact-image">
            <img src="img/phone.png">
          </div>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>0773777111</p>
        </div>
        <div class="col-md-4 contact-card">
          <h3>LinkedIn</h3>
          <div class="contact-image">
            <a href="https://uk.linkedin.com/in/matt-barker-b9282b37" target="_blank"><img src="img/linkedin.png"></a>
          </div>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p><a href="https://uk.linkedin.com/in/matt-barker-b9282b37" target="_blank">
            Matt Barker</a></p>
        </div>
      <div class="col-md-4 contact-card">
          <h3>Address</h3>
        <div class="contact-image">
          <img src="img/placeholder-2.png">
          </div>
        <p>56 Fake Street</p>
        <p>Fake Town</p>
        <p>S44 1BT</p>
        </div>
      </div>
      <div class="row map-row">
        <div class="map-image-container">
          <img src="img/map.png">
        </div>
        <!--<div class="map-image">
        </div>-->
    </div>
    </div><!--contact container-->
<!--</div>-->
  </body>
</html>

<!doctype html>
<html lang="en">
  <head>
        
    <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
        
      <title>About | Matt Barker</title>
        
      <!--[if lt IE 9]>
        <script src="dist/html5shiv.js"></script>
      <![endif]-->
        <link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i" rel="stylesheet">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/styles.css">
        <!--<link rel="stylesheet" href="css/about_styles.css">-->
  </head>

  <body>
    <div class="container">
    <div class="nav">
      <a href="index.html"><strong>Matt</strong>Barker</a>
      <ul>
        
        <li><a href="#">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </div>
    </div>
    <div class="container">
      <div class="header">
        <h1><strong>About</strong> Me</h1>
      </div>
      
      <div class="main-text">
        <h3>More about me...</h3>
        <p>
          I'm a budding web designer living in the midlands of the UK. My current full time job is Lead IT Support for a firm of solicitors but I'm working towards a change of career to web design and development. <br><br>
          I am currently enrolled in the <a href="http://www.careerfoundry.com" target="_blank">Career Foundry</a> <a href="https://careerfoundry.com/en/courses/become-a-web-developer" target="_blank">Web Developer</a> course.
        </p>
      </div><!-- end main-text -->
    </div><!-- end container -->

  </body>
</html>

以上是关于html 任务1.6的要点的主要内容，如果未能解决你的问题，请参考以下文章

html 任务1.10的要点

新解法华为OD机试 - 任务调度 | 备考思路，刷题要点，答疑，od Base 提供

Java 1.6 被后台 Symfony 任务调用时损坏

APP测试要点

Gradle compileJava 任务警告：[options] 引导类路径未与 -source 1.6 一起设置

GCD使用串行并行队列与同步异步执行的各种组合及要点分析