大学生做的广告短视频网站,jquery插件网站推荐,建购物网站要多少钱,我做网站1、CSS 布局 - display 属性
1.1 display 属性 display 属性是用于控制布局的最重要的 CSS 属性。 display 属性规定是否/如何显示元素。 每个 HTML 元素都有一个默认的 display 值#xff0c;具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。
…1、CSS 布局 - display 属性
1.1 display 属性 display 属性是用于控制布局的最重要的 CSS 属性。 display 属性规定是否/如何显示元素。 每个 HTML 元素都有一个默认的 display 值具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。
1.2 块级元素block element
块级元素总是从新行开始并占据可用的全部宽度尽可能向左和向右伸展。会占领页面的一行其后多个block元素自动换行、 可以设置widthheight设置了width后同样也占领一行、同样也可以设置 margin与padding属性。
块级元素的一些例子
divh1 - h6pformheaderfootersection
1.3 行内元素inline element
内联元素不从新行开始仅占用所需的宽度。与其他元素在同一行上高度行高以及底边距不可改变高度就是内容文字或者图片的宽度不可以改变。
行内元素的一些例子
spanaimg
1.4 Display: none display: none; 通常与 JavaScript 一起使用以隐藏和显示元素而无需删除和重新创建它们。如果您想知道如何实现此目标请查看本页面上的最后一个实例。 默认情况下script 元素使用 display: none;。
1.5 覆盖默认的 Display 值
display: inline; 将内容设置为行内元素 将元素显示为块级元素从而可以更好地操控元素的宽高以及内外边距每一个块级元素都是从新的一行开始。display: block;将内容设置为块元素 将元素显示为行内元素高度行高以及底边距不可改变高度就是内容文字或者图片的宽度不可以改变。多个相邻的行内元素排在同一行里知道页面一行排列不下才会换新的一行。
li {display: inline;
}
a {display: block;
}1.6 隐藏元素
display:none 隐藏元素不占位visibility:hidden 隐藏元素占位
1display:none
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style
h1.hidden{display: none;
}/style
bodyh1此标题可见/h1h1 classhidden此标题不可见/h1p请注意 display: none; 的标题不会占用任何空间。/p
/body
/html运行效果 2visibility:hidden
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style
h1.hidden{display: none;
}
h1.hiddenvisibility{visibility: hidden;
}/style
bodyh1此标题可见/h1!-- h1 classhidden此标题不可见/h1 --h1 classhiddenvisibility此标题不可见,占空间/h1p请注意 display: none; 的标题不会占用任何空间。/p
/body
/html运行效果
2、CSS 布局 - width 和 max-width
外边距设置为 auto margin: auto以将元素在其容器中水平居中
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style
div.width{width: 500px;border: 3px solid #73AD21;margin: auto;
}
div.maxwidth{max-width: 500px;margin: auto;border:3px solid #73AD21;
}/style
bodydiv classwidth这个 div 元素的宽度是500px;/divbrdiv classmaxwidth这个 div 元素的最大宽度是500px;/divpb提示/b将浏览器窗口拖动到小于500px的宽度以查看这两个 div /p/body
/html运行效果
3、CSS 布局 - position 属性
position 属性规定应用于元素的定位方法的类型。
有五个不同的位置值
staticrelativefixedabsolutesticky
3.1 默认属性 position: static HTML 元素默认情况下的定位方式为 static静态。 静态定位的元素不受 top、bottom、left 和 right 属性的影响。 position: static; 的元素不会以任何特殊方式定位它始终根据页面的正常流进行定位 默认情况下块级元素占据其父容器的整个宽度并垂直堆叠。 内联元素则不会创建换行符并与其他元素在同一行内显示。 具有position: static;的元素不受z-index属性影响。它们的堆叠顺序由它们在文档树中的位置决定并且无法改变。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv.static {border: 3px solid #73AD21;position: static;}
/stylebodydiv classstatic这个 div 元素设置 position: static/divpb提示/b设置 position: static; 的元素不会以任何特殊方式定位它是始终根据页面的正常流进行定位/p/body/html运行效果
3.2 相对定位position: relative;
具有position: relative;的元素仍然遵循文档流并且不会脱离文档流。相对定位的元素仍然占据其原始位置其他元素的布局不会受到影响。可以使用top、right、bottom和left属性来定义相对于元素原始位置的偏移量。这些偏移量是相对于元素自身进行计算的。当使用相对定位时元素不会对其他相对定位或绝对定位的元素产生影响。其他元素的定位不会受到影响它们仍会按照正常流程进行显示。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style*{margin: 0px;padding: 0px;}/* 默认属性 */div.static {border: 3px solid #73AD21;position: static;}div.relative{position: relative;left: 50px;top: 50px;border: 3px solid #73AD21;}/stylebodydiv classstatic这个 div 元素设置 position: static/div pb提示/b设置 position: static; 的元素不会以任何特殊方式定位它是始终根据页面的正常流进行定位/pdiv classrelative这个 div 元素设置 position: relative/div
/body/html运行效果 3.3 固定定位position: fixed;
固定定位元素的位置相对于浏览器窗口进行定位不会随页面滚动而改变。可以使用top、bottom、left、right属性来指定定位的偏移量。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style*{margin: 0px;padding: 0px;}/* 默认属性 */div.static {border: 3px solid #73AD21;position: static;}div.relative{position: relative;left: 50px;top: 50px;border: 3px solid #73AD21;}div.fixed{position: fixed;right: 0px;bottom: 50px;border: 3px solid #73AD21;}/stylebodydiv classstatic这个 div 元素设置 position: static/div pb提示/b设置 position: static; 的元素不会以任何特殊方式定位它是始终根据页面的正常流进行定位/pdiv classrelative这个 div 元素设置 position: relative/div div classfixed这个 div 元素设置 position: fixed/div
/body/html运行效果
3.4 绝对定位position: absolute; position: absolute; 的元素相对于最近的定位祖先元素进行定位而不是相对于视口定位如 fixed。 然而如果绝对定位的元素没有祖先它将使用文档主体body并随页面滚动一起移动。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style* {margin: 0px;padding: 0px;}div.relative {position: relative;left: 50px;top: 50px;width: 500px;height: 300px;border: 3px solid #73AD21;}div.absolute {position: absolute;border: 3px solid #73AD21;width: 100px;left: 20px;top: 80px;}
/stylebodydiv classrelativep 这个 div 元素设置 position: relative/pdiv classabsolute这个 div 元素设置 position: absolute/div/div/body/html运行效果
3.5 粘性定位position: sticky; position: sticky; 的元素根据用户的滚动位置进行定位。 粘性元素根据滚动位置在相对relative和固定fixed之间切换。起先它会被相对定位直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置比如 position:fixed。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style* {margin: 0px;padding: 0px;}div.sticky{position: -webkit-sticky;position: sticky;top: 0px;background-color:aquamarine;border: 3px solid #73AD21;}
/stylebodyp哈哈哈哈/pdiv classsticky这个 div 元素设置 position: sticky/divdiv stylepadding-bottom: 1000pxp在此例中当您到达元素的滚动位置时粘性元素将停留在页面顶部top: 0。/pp向上滚动以消除粘性。/pp一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus./pp一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus./p/div
/body/html运行效果 滚动后效果
3.6 重叠元素z-index 在对元素进行定位时它们可以与其他元素重叠。 z-index 属性指定元素的堆栈顺序哪个元素应放置在其他元素的前面或后面。 元素可以设置正或负的堆叠顺序 具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。 如果两个定位的元素重叠而未指定 z-index则位于 HTML 代码中最后的元素将显示在顶部。
1 z-index: -1;
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style
img{position: absolute;z-index: -1;width: 200px;height: 200px;
}/style
bodydiv
img srcimgs/icon_mess_sellorder.png
p你好呀哈哈哈/p/div/body
/html运行效果
2 z-index: 1;
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style
img{position: absolute;z-index: 1;width: 200px;height: 200px;
}/style
bodydiv
img srcimgs/icon_mess_sellorder.png
p你好呀哈哈哈/p/div/body
/html运行效果
3.7 定位图像中的文本
Top LeftTop RightBottom LeftBottom RightCentered
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv.relative {position: relative;}img {width: 200px;height: 200px;opacity: 0.7;z-index: -1;}p.topleft {position: absolute;top: 0px;left: 0px;font-size: 25px;}p.topright {position: absolute;top: 0px;right: 0px;font-size: 25px;}p.bottomleft {position: absolute;bottom: 0px;left: 0px;font-size: 25px;}p.bottomright {position: absolute;bottom: 0px;right: 0px;font-size: 25px;}p.centered {position: absolute;text-align: center;font-size: 25px;width: 100%;}
/stylebodydivimg srcimgs/icon_mess_sellorder.pngp classtopleft左上/pp classtopright右上/pp classbottomleft左下/pp classbottomright右下/pp classcentered居中/p/div/body/html运行效果
4、CSS 布局 - 溢出overflow
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。overflow 属性仅适用于具有指定高度的块元素。
overflow 属性可设置以下值
visible - 默认。溢出没有被剪裁。内容在元素框外渲染hidden - 溢出被剪裁其余内容将不可见scroll - 溢出被剪裁同时添加滚动条以查看其余内容auto - 与 scroll 类似但仅在必要时添加滚动条
4.1 overflow: visible
默认。溢出没有被剪裁。内容在元素框外渲染
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style
div.visible{width: 100px;height: 100px;overflow: visible;border: 1px solid #777;background-color: aquamarine;
}/style
bodydiv classvisible poverflow: visible 默认情况下溢出是可见的这意味着它不会被裁剪超出部分在元素外渲染/p/div/body
/html运行效果
4.2 overflow: hidden;
使用 hidden 值溢出会被裁剪其余内容被隐藏
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv.hidden{margin-top: 100px;width: 100px;height: 100px;overflow: hidden;border: 1px solid #777;background-color: aquamarine;
}/style
bodydiv classhidden poverflow: hidden 会剪裁溢出并隐藏内容的其余部分/p/div/body
/html运行效果 4.3 overflow: scroll;
scroll溢出将被裁剪并添加滚动条以便在框内滚动。请注意这将在水平和垂直方向上添加一个滚动条即使您不需要它
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv.scroll{margin-top: 20px;width: 100px;height: 100px;overflow: scroll;border: 1px solid #777;background-color: aquamarine;
}/style
bodydiv classscroll poverflow: scroll 溢出部分会被裁剪并自动添加滚动条滚动可见其余部分/p/div/body
/html运行效果
4.4 overflow: auto;
auto 值类似于 scroll但是它仅在必要时添加滚动条
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style
div.auto{margin-top: 20px;width: 100px;height: 100px;overflow: auto;border: 1px solid #777;background-color: aquamarine;
}/style
bodydiv classauto poverflow: auto 溢出部分会被裁剪但只会在必要时候增加滚动条内容超出元素高度时候自动增加滚动条滚动可见其余部分/p/divdiv classauto poverflow: auto 哈哈哈/p/div
/body
/html运行效果
4.5 overflow-x 和 overflow-y
overflow-x 和 overflow-y 属性规定是仅水平还是垂直地或同时更改内容的溢出
overflow-x 指定如何处理内容的左/右边缘。overflow-y 指定如何处理内容的上/下边缘。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylediv.overflow-xy{margin-top: 20px;width: 100px;height: 100px;overflow-x: hidden;overflow-y: scroll;border: 1px solid #777;background-color: aquamarine;
}/style
bodydiv classoverflow-xy poverflow-x 和 overflow-y 属性规定是仅水平还是垂直地或同时更改内容的溢出/p/div
/body
/html运行效果
5、CSS 布局 - 浮动和清除float、clear CSS float 属性规定元素如何浮动。 CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。
5.1 浮动float 属性
float 属性用于定位和格式化内容例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一
left - 元素浮动到其容器的左侧right - 元素浮动在其容器的右侧none - 元素不会浮动将显示在文本中刚出现的位置。默认值。inherit - 元素继承其父级的 float 值
5.1.1 float: right;
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style* {margin: 0px;padding: 0px;}div.block{display: block;}img.right {width: 100px;height: 100px;float: right;margin-left: 20px;}img.left {width: 100px;height: 100px;float: left;margin-right: 20px;}
/stylebodydiv classblockpimg classright altpic srcimgs/icon_mess_sellorder.png图片在文字右边/p/div/body/html运行效果
5.1.2 float: left;
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style* {margin: 0px;padding: 0px;}div.block{display: block;}img.right {width: 50px;height: 50px;float: right;margin-left: 20px;}img.left {width: 50px;height: 50px;float: left;margin-right: 20px;}
/stylebody!-- div classblockpimg classright altpic srcimgs/icon_mess_sellorder.png图片在文字右边/p/div --div classblockpimg classleft altpic srcimgs/icon_mess_sellorder.png图片在文字左边图片在文字左边图片在文字左边图片在文字左边图片在文字左边图片在文字左边图片在文字左边图片在文字左边图片在文字左边/p
/div
/body/html运行效果
5.1.3 float: none;
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style* {margin: 0px;padding: 0px;}div.block{display: block;}img.none{width: 50px;height: 50px;float: none;}
/stylebodydiv classblockpimg classnone altpic srcimgs/icon_mess_sellorder.png文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字/p
/div
/body/html运行效果在这里插入代码片
5.2 清除: clear 和 clearfix
5.2.1 clear
clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。
clear 属性可设置以下值之一
none - 允许两侧都有浮动元素。默认值left - 左侧不允许浮动元素right- 右侧不允许浮动元素both - 左侧或右侧均不允许浮动元素inherit - 元素继承其父级的 clear 值
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 外部引入css --link relstylesheet typetext/css hrefcss/baseStyle.css
/head
stylediv.ex1 {float: left;border: 1px solid #777;}div.ex2{clear: left;}img.left {width: 50px;height: 50px;float: left;}
/stylebodyh1不使用clear/h1div classex1内容1/divdiv 内容2内容2内容2内容2内容2内容2内容2/divh1使用clear/h1 div classex1内容1/divdiv classex2内容2内容2内容2内容2内容2内容2内容2/div/body/html运行效果
5.2.2 clearfix
如果一个元素比包含它的元素高并且它是浮动的它将“溢出”到其容器之外,然后我们可以向包含元素添加 overflow: auto;来解决此问题
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 外部引入css --link relstylesheet typetext/css hrefcss/baseStyle.css
/head
stylediv.ex1 {clear: both;border: 1px solid #777;}div.clearfix{clear: both;overflow: auto;border: 1px solid #777;}img.float {width: 50px;height: 50px;float: left;}
/stylebodyh1沒有使用clearfix /h1div classex1img classfloat srcimgs/icon_mess_sellorder.pngp内容内容内容内容内容内容内容/p/divh1 stylepadding-top: 50px使用clearfix /h1div classclearfiximg classfloat srcimgs/icon_mess_sellorder.pngp内容内容内容内容内容内容内容/p/div/body/html运行效果
5.3 补充
CSS 布局 - 浮动实例
5.3.1 box-sizing: border-box;(添加边距后会破坏排版的解决方法)
您可以轻松地并排创建三个浮动框。但是当您添加一些内容来扩大每个框的宽度例如内边距或边框时这个框会损坏。 box-sizing 属性允许我们在框的总宽度和高度中包括内边距和边框确保内边距留在框内而不会破裂。
1未使用
!DOCTYPE html
html
head
style.box {float: left;width: 33.33%;padding: 50px;
}.clearfix::after {content: ;clear: both;display: table;
}
/style
/head
bodyh1网格框/h1p并排浮动的框/pdiv classclearfixdiv classbox stylebackground-color:#bbbp框中的一些文本。/p/divdiv classbox stylebackground-color:#cccp框中的一些文本。/p/divdiv classbox stylebackground-color:#dddp框中的一些文本。/p/div
/div/body
/html
运行效果 2使用后
!DOCTYPE html
html
head
style
* {box-sizing: border-box;
}.box {float: left;width: 33.33%;padding: 50px;
}.clearfix::after {content: ;clear: both;display: table;
}
/style
/head
bodyh1网格框/h1p并排浮动的框/pdiv classclearfixdiv classbox stylebackground-color:#bbbp框中的一些文本。/p/divdiv classbox stylebackground-color:#cccp框中的一些文本。/p/divdiv classbox stylebackground-color:#dddp框中的一些文本。/p/div
/divp请注意我们还用了 clearfix hack 来处理布局流并添加了 box-sizing 属性以确保框不会由于额外的内边距填充而损坏。尝试删除此代码以查看效果。/p/body
/html
运行效果
5.3.2 水平多个框的时候保证高度一致高度为最高的那个框
display: flex;将对象作为弹性伸缩盒显示 1未使用
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet typetext/css hrefcss/baseStyle.css
/head
style* {/* padding和border的值就不会在影响元素的宽高相当于把padding和border的值都算在content里 */box-sizing: border-box;}.clearfix::after{content: ;clear: both;display: table;}/* div.flex {display: flex;} */div.ex1 {float: left;width: 33%;background-color: aquamarine;padding: 50px;}div.ex2 {float: left;width: 33%;background-color: bisque;padding: 50px;}div.ex3 {float: left;width: 33%;background-color: cadetblue;padding: 50px;}/* p{text-align: center;} */
/stylebody!-- div classflex --div classex1p文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1/p/divdiv classex2p文本内容2/p/divdiv classex3p文本内容3/p/div!-- /div --
/body/html运行效果
2使用后
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet typetext/css hrefcss/baseStyle.css
/head
style* {/* padding和border的值就不会在影响元素的宽高相当于把padding和border的值都算在content里 */box-sizing: border-box;}.clearfix::after{content: ;clear: both;display: table;}div.flex {display: flex;}div.ex1 {float: left;width: 33%;background-color: aquamarine;padding: 50px;}div.ex2 {float: left;width: 33%;background-color: bisque;padding: 50px;}div.ex3 {float: left;width: 33%;background-color: cadetblue;padding: 50px;}/* p{text-align: center;} */
/stylebodydiv classflexdiv classex1p文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1文本内容1/p/divdiv classex2p文本内容2/p/divdiv classex3p文本内容3/p/div/div
/body/html运行效果
5.3.3 导航栏 练习
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefcss/baseStyle.cssstyleul {width: 100%;background-color: black;margin: 0;padding: 0;overflow: hidden;}li a{float: left;padding: 10px 15px;font-size: 15px;color: white;display: inline-block;}a.choose {background-color: brown;}a {color: white;/* 取消下划线 */text-decoration: none;/* 文字居中 */text-align: center;}/* 鼠标放置效果 */a:hover {background-color: aquamarine;}/style
/headbodyulli a classchoose hrefhtml_jump_page.html首页/a/lili a classunchoose hrefhtml_jump_page.html控制台/a/lili a classunchoose hrefhtml_jump_page.html个人中心/a/li/ul
/body/html运行效果
5.3.4 简单布局练习 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title简单布局/title!-- 引用外部css样式 --!-- link relstylesheet hrefcss/baseStyle.css --style/* padding和border的值就不会在影响元素的宽高相当于把padding和border的值都算在content里 */* {box-sizing: border-box;}/* 防止溢出 */.clearfix::after {content: ;clear: both;display: table;}div.header {background-color: grey;padding: 20px 10px;margin: 10px;}h1.header {color: white;font-size: 20px;}div.footer {background-color: grey;padding: 20px 10px;}ul {list-style-type: none;padding: 0;margin: 0;}li {background-color: #33b5e5;color: white;padding: 10px 20px;margin-bottom: 10px;}.column {float: left;padding: 15px;}.menu {width: 25%;}.content {width: 75%;}/style
/headbody!-- 顶部标题 --div classheaderh1 classheaderShang Hai/h1/div!-- 中间 --div classclearfixdiv classcolumn menu!-- 左侧导航栏 --ulliThe Fight/liliThe City/liliThe IsIand/liliThe Food/li/ul/div!-- 右侧内容 --div classcolumn contenth1The City/h1pShanghai is one of the four direct-administered municipalities of the Peoples Republic of China. Welcome toShanghai!/ppYou will learn more about web layout and responsive web pages in a later chapter./p/div/div!-- Footer --div classheaderh1 classheaderFooter Text/h1/div/body/html
