CSS框模型

演示地址

http://xuanransoftware.com/phpStudy/0408/

效果图

学习总结

1.知道了盒模型的基本概念
2.使用flex布局时，如果使用了元素的内边距padding后，把元素框的重要属性box-sizing:设置为border-box
3.如果想要元素框在父元素框中居中显示则定义属性margin-left: auto margin-right: auto
4.默认情况下元素框中的元素框是块元素，如果想行内显示，则需要定义属性display: flex

html示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <title>同城信息网</title>
    <style>
      @media screen and (max-width: 400px) {
        nav {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <!-- 页面导航 -->
      <nav>
        <img src="images/logo.jpg" width="100" height="50" />
        <ul>
          <li>
            <a href="mainIndex.html" target="mainFrame">首页</a>
            <a href="formTable.html" target="mainFrame">用户注册</a>
            <a href="table.html" target="mainFrame">表格</a>
            <a href="listTable.html" target="mainFrame">列表</a>
          </li>
        </ul>
      </nav>
    </header>
    <main>
      <aside>
        <section>
          <label for="" class="iconfont"> 新闻资讯</label>
        </section>
        <section>
          <label for="" class="iconfont"> 搜索内容</label>
        </section>
        <section>
          <label for="" class="iconfont"> 联系我们</label>
          <ul>
            <li>名称：北京瑄然软件</li>
            <li>地址：北京顺义区...</li>
            <li>电话：<a href="tel:15010046927">1501004xxxx</a></li>
            <li>
              邮箱：<a href="mailto:573661083@qq.com">5736610xx@qq.com</a>
            </li>
          </ul>
        </section>
      </aside>
      <section class="mainclass">
        <iframe
          name="mainFrame"
          width="695"
          height="495"
          scrolling="auto"
          style="border: 0px;"
          src="mainIndex.html"
        >
        </iframe>
      </section>
    </main>
    <footer>
      <section>
        <a href="http://www.xuanransoftware.com/" target="_blank"
          >北京瑄然软件工作室</a
        >  
        <a href="https://www.php.cn/" target="_blank">友情链接：php中文网</a>
      </section>
    </footer>
  </body>
</html>

css示例代码

* {
  margin: 0px;
  padding: 0px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
@font-face {
  font-family: "iconfont";
  src: url("../fontIcon/iconfont.eot");
  src: url("../fontIcon/iconfont.eot?#iefix") format("embedded-opentype"),
    url("../fontIcon/iconfont.woff2") format("woff2"),
    url("../fontIcon/iconfont.woff") format("woff"),
    url("../fontIcon/iconfont.ttf") format("truetype"),
    url("../fontIcon/iconfont.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
header {
  width: 920px;
  height: 65px;
  background-color: lightseagreen;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
main {
  width: 920px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  display: flex;
}
footer {
  width: 920px;
  height: 50px;
  background-color: lightseagreen;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  box-sizing: border-box;
}
footer > section {
  height: 30px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}
nav {
  font-size: large;
  font-weight: bold;
  display: flex;
  height: 65px;
  box-sizing: border-box;
  background-color: white;
}
nav img {
  margin-top: 5px;
  margin-left: 5px;
}
nav ul {
  margin-top: 20px;
  margin-left: 40px;
  margin-right: auto;
  display: flex;
  list-style: none;
}
nav ul a {
  text-decoration: none;
  padding: 0 15px;
}
nav ul a:link {
  color: blue;
}
nav ul a:visited {
  color: blueviolet;
}
nav ul a:hover {
  color: tomato;
}
aside {
  width: 220px;
  height: 500px;
  box-sizing: border-box;
}
aside > section:nth-of-type(-n + 2) {
  height: 170px;
  margin-top: 2px;
  border: 1px solid lightgreen;
}
aside > section:last-of-type {
  margin-top: 2px;
  border: 1px solid lightgreen;
}
aside > section > ul > li {
  list-style-type: none;
  margin-top: 5px;
  padding: 2px;
}
.mainclass {
  display: flex;
  margin-left: 0px;
  height: 500px;
  width: 695px;
  box-sizing: border-box;
}
button {
  height: 30px;
  width: 100;
  border: none;
  outline: none;
  background-color: lightseagreen;
  color: white;
}
button:hover {
  background-color: lightsalmon;
  cursor: pointer;
}
form {
  padding: 30px;
  box-shadow: 0 0 8px #888;
  border-radius: 10px;
  margin: auto;
  background-color: lightskyblue;
  display: grid;
  gap: 15px;
}
form fieldset {
  align-items: center;
}

演示地址

效果图

学习总结

html示例代码

css示例代码

相关文章