首页 > 其他分享 >布局

布局

时间:2023-01-13 10:36:46浏览次数:38  
标签:City Shanghai color menu 布局 padding background

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.menu {
  width: 25%;
}

.content {
  width: 75%;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 8px;
  background-color: #33b5e5;
  color: #ffffff;
}

.menu li:hover {
  background-color: #0099cc;
}
</style>
</head>
<body>

<div class="header">
  <h1>Shanghai</h1>
</div>

<div class="clearfix">
  <div class="column menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="column content">
    <h1>The City</h1>
    <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!
</p>
    <p>You will learn more about web layout and responsive web pages in a later chapter.</p>
  </div>
</div>

<div class="footer">
  <p>Footer Text</p>
</div>

</body>
</html>

 

标签:City,Shanghai,color,menu,布局,padding,background
From: https://www.cnblogs.com/fuanyu/p/17048749.html

相关文章

  • CSS 网格(Grid)布局
    CSSGrid布局是一种二维布局方式,可以将页面分成行和列,并在其中放置元素。使用Grid布局时,需要定义网格容器和网格项目。第一步,在网格容器元素(通常是一个div)上设置disp......
  • 【css】使用弹性盒子布局时,省略号问题
    栗子:<htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=dev......
  • uni-app Flex布局
    样式导入使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。示例代码:<style>@import"../../common/uni.css";......
  • CSS3 中flex 布局
    Flexbox是CSS3中的一种布局模式。它允许元素在一个容器中自动排列,可以使用灵活的方式创建复杂的布局。Flex布局有很多优点,例如,它很容易实现响应式设计,并且可以很容易地......
  • 混乱与整齐-布局-PCB系列教程1-12
     搞电子的人,通常看上去总是混乱的。当然,更乱的是桌面。下图是模电领域大神JimWilliams大师(1948-2011)与他的办公桌。但是电子工程师的作品,却要求整齐。电路板是工业时代的......
  • 不谋全局者,不足谋一域-预布局-PCB系列教程1-11
    画完板框以后,要对元器件进行布局。布局的质量,将直接决定布线的难度。导入到PCB中的元器件种类很多,可谓一团乱麻。但不谋全局者,不足谋一域,要想把元器件摆放整齐,就要有大局观......
  • twaver局部布局+手动布局实现画布内添加网络自动布局(布局成圆形)
    效果代码<html><head><title>TWaverHTML5</title><scriptsrc="../twaver.js"></script></head><bodyonload="init()"><buttonstyle="pos......
  • flex布局设置不换行之后,无法设置子元素宽度
    display:flex;flex-wrap:nowrap;我通过设置元素不换行,然后子元素分别设置了50%的宽度,但是无法生效 原因设置display:flex后,子元素在没有超过指定宽度的时候,子元素......
  • SAP UI5 FlexBox Layout 布局的概念和具体使用案例介绍试读版
    SAPUI5官网提到了所谓FlexBoxLayout布局的概念。文档提到,FlexBox布局可以让SAPUI5界面上的控件充分利用屏幕可用空间,避免空间的浪费或者控件之间出现重叠的现象发......
  • 弹性盒子布局
    伸缩盒子模型伸缩盒子模型控制的是父子关系父元素:伸缩容器子元素:伸缩项目主轴:start-end交叉轴(侧轴)Flex容器display:flexdisplay:-webkit-box(旧版本)主......