50 lines
1.5 KiB
Markdown
50 lines
1.5 KiB
Markdown
---
|
||
title: HTML and CSS Cheat Sheet
|
||
localeTitle: HTML和CSS备忘单
|
||
---
|
||
这个（希望）及时的页面将成长为涵盖基本和简单的HTML和CSS解决方案。
|
||
|
||
如果您有不同的方法，请添加到备用解决方案中。
|
||
|
||
## 使`<hr>`水平规则更小
|
||
|
||
```css
|
||
hr {
|
||
width: 75%;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
```
|
||
|
||
## 给出`<div>`非滚动背景
|
||
|
||
```css
|
||
#divName {
|
||
padding-top: 50px;
|
||
height: 500px;
|
||
color: #fff;
|
||
background-image: url("your_url.jpg");
|
||
background-repeat: no-repeat;
|
||
background-attachment: fixed;
|
||
background-size: 100%;
|
||
}
|
||
```
|
||
|
||
尝试使用不同的值来查看它如何影响html中的div和over
|
||
|
||
```html
|
||
|
||
<div id="divName" class="container-fluid">
|
||
```
|
||
|
||
## 垂直对齐（一行文字）
|
||
|
||
这可以在CSS导航菜单中使用。关键是使菜单的高度和文本的行高相同。 `css .nav li{ line-height:50px; height:50px; }` [这里可以找到](https://www.webdesignerdepot.com/2016/10/20-essential-css-tricks-every-designer-should-know/)更多巧妙的技巧
|
||
|
||
## 居中一个水平列表
|
||
|
||
[http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/](http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/)
|
||
|
||
## HTML文档的部分和大纲
|
||
|
||
[https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections _和_ _HTML5_ _文档_大纲](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document) |