学会开发静态网页

小测笔记

h1标签使用 ui header 样式，对 p 标签使用 medium header 样式，对图片-标签使用 image link 样式
文字的间距靠里，需要用到 very padded 的样式
去掉边框的圆角、阴影和缝隙，需要用到 vertical的样式
segment 是不限高度，宽度的框架。
container是自动适应屏幕宽度的无边框的框架。
插入一个星星就可以直接用star icon来表示，想要插入一个圆形的星星就使用circular star icon来表示

常用文档
https://semantic-ui.com/elements/button.html
http://www.w3school.com.cn/html/html_images.asp

html备注写法：
very padded：离边缘一定距离
lorem：大段随机文字
text menu、ui grid：

于是就这样让老师露脸啦hhh

观察发现，菜单上的所有元素都堆积在左边，没有平均分布在菜单上，所以应该增加一个平均分布的菜单样式。到 Semantic UI 的 menu 部分的文档找了一下，发现 Evenly Divided 这个样式是满足需求的，应该把菜单那一行的代码增加：fluid nine item
定栏网格:

grid container

他人笔记

写自己的css

样式选择器：

ID选择器：

元素选择器：

content、border、padding、：

padding

margin

Ctrl+D：同时选中多个

！

1234，上右下左

markdown here插件

color picker网页
css基础题作业1：

css基础作业2：

成品图

延伸学习的资源：
https://css-tricks.com，这个网站介绍了许多 css 的 trick，方便你在遇到问题时查阅

《Web设计与前端开发秘籍：HTML & CSS 设计与构建网站》https://item.jd.com/11186682.html。这本书并不是那种枯燥的编程书，而是设计感极强、排版精美、易懂易上手的方式来带你深入 HTML与 CSS 的种种规则，适合通读一遍。

用百分比模糊定位：background的css的position一定要写absolute

背景引用图片 ![Uploading UC截图20170322173249_421100.png . . .]

引用规则

更改默认规则

居中，改点

作业1成品

作业2成品

可创建多个link来修改原有css样式。在原css下换行新建，将已有class复制（空格换成点）

background-size：contain（完全符合框）；cover（平铺）
text menu（semantic）：无底文字

button

button靠右：先在父级ui menu
子级right menu
子级item
子级button:

    <div class="ui inverted padded vertical red segment">
      <div class="ui inverted text menu">
        <div class="ui image">
          ![](images/tenlogo.png)
        </div>

        <div class="right menu">
          <div class="item">
            <div class="ui circular image">
              ![](images/hou30.jpg)
            </div>
            <p>admin</p>
          </div>
          <div class="item">
            <button class="ui  inverted circular button" type="button" name="button">Logout</button>

          </div>
        </div>
      </div>


    </div>