学会开发静态网页

小测笔记

• 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
定栏网格:

1 grid container 他人笔记

写自己的css

样式选择器：

1
2

ID选择器：

1

元素选择器：

1

content、border、padding、：

padding margin

Ctrl+D：同时选中多个

！
1234，上右下左

markdown here插件

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

1 2

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>

横向文字

字体设置等。第六课作业1 css

第六课作业1 center aligned：居中

Google字体.png 作业成品图1 2 dropdown下拉菜单 作业2成品图1 2 优先级

给网页加背景：直接加在body上
除了div，还有h3这样的易被忽略的标签
semantic ui 有专门针对评论的设计。class=“ui comments”
代码专门放一集。
7.1作业：

固定背景：

body的css上： background-attachment: fixed;

图标icon/标题header中的白色是inverted：
<i class="inverted angle left icon"></i>

text-align:center/right/left

7.2作业成品图.png

borderless menu:去除圆角，去除块间的间隔细线

ui icon input
input
item
channel
ui segment container-bottom
hd-

谢谢老师宽大的打分~