SI 539 网站开发（一）：week1 - week5 HTML & CSS & Grid

HanhahnaH

于 2020-09-08 10:45:03 发布

阅读量555

点赞数

分类专栏：课程笔记文章标签： web

本文链接：https://blog.csdn.net/Hanhahahahah/article/details/108460456

版权

课程笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Syllabus

week 1-14 为了鼓励大家参与discussion，optional
Assignments均算分，提交写好的网址链接，20次机会
Quiz 可以尝试3次周四早上开 – 周一晚上截至
Participation optional

Required Assignments:

(300 pts) 4 Quiz Online Assessments (75 pts each)
Each assessment will be open three times.
Once open, it will remain open for 5 days and have a time limit of 24 hours once you start the quiz.
(700 pts) Homework Assignments (100 pts each)
There will be 7 homework assignments,
Homework is always due on a Friday at midnight but can be turned in until Monday at midnight with no penalty.
Homeworks that utilize an autograder may be submitted up to 20 times.
In the event of an emergency, you may waive ONE homework assignment. Just contact the instructional team at 539Instructors@umich.edu and just let us know within 5 days of the grade being released.
(200pts) Portfolio
Project
There will be a progress check in November worth 50 points. If you lose points in the progress check you may resubmit within 1 week to make up the points.
There will be mandatory peer reviews for the portfolio as well. You will review two portfolios.
Students who want to earn an A on the portfolio must submit early and demo during the final discussion section of the term.
There is a 10% penalty per day for late submissions, starting at 12:05am.

Optional Components:

(Up to 60 pts) Discussion section assignments/attendance (5 pts each)
To receive credit for the discussion section assignment you must attend the discussion and participate. You may not be more than 10 minutes late and/or leave more than 10 minutes early.
Occasionally you will be able to earn credit by completing a task independently and submitting it before the discussion period.
(Up to ~70pts) Participation
Students who actively participate in discussions, polls, Piazza, and/or office hours will be eligible for participation points.

Week 2 & 3: CSS

What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files

Selector

CSS selector
Selector优先级：

内连样式优先级 1000：

<p style = "color:blue">Hi</p>

id 选择器优先级 100

 #fancy{
  color: green;
}

类选择器优先级 10

.plain{
  color: black;
  font-size: 12px;
}

元素选择器优先级 1

p{
  color: red;
  font-size: 16px;
}

统配选择器优先级 0
继承的样式优先级没有

Element Selector

p { }
页面内所有p elements都会被修饰

<head>
<style>
p {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

Grouping Selector
style相同的elements放在一起

<style>
h1, h2, p {
  text-align: center;
  color: red;
}
</style>

ID Selector

#para1
修饰id = para1的element
id在一个page内是唯一的，所以是选择唯一的element

<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>

Class Selector

.center
用来选择所有class是center的elements

<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>

p内所有class = ‘center’的elements被选中

<style>
p.center {
  text-align: center;
  color: red;
}
</style>

Universal Selector

*
选择当前page中的所有HTML elements

<style>
* {
  text-align: center;
  color: blue;
}
</style>

Advanced Selector

Child Selector

Descendant Selector

article h2 {...}

article内的所有叫做h2的elements都被选中（只要在 article 的 tag 内）

<h2>...</h2>
<article>
  <h2>This heading will be selected</h2>
  <div>
    <h2>This heading will be selected</h2>
  </div>
</article>

Direct Child Selector

article > p {...}

article下一层嵌套的叫做h2的element被选中（处于其他层的h2并未被选中）

<p>...</p>
<article>
  <p>This paragraph will be selected</p>
  <div>
    <p>并没有被选中</p>
  </div>
</article>

Sibling Selector

General Sibling Selector

h2 ~ p {...}

所有 h2 同一级的 elements 中，所有叫 p 的 elements 被选中

<p>...</p>
<section>
  <p>...</p>
  <h2>...</h2>
  <p>This paragraph will be selected</p>
  <div>
    <p>...</p>
  </div>
  <p>This paragraph will be selected</p>
</section>

Adjacent Sibling Selector

h2 + p {...}

只有紧跟着 article 的叫做 p 的 element被选中（只选紧跟的一个）

<p>...</p>
<section>
  <p>...</p>
  <h2>...</h2>
  <p>This paragraph will be selected</p>
  <div>
    <p>...</p>
  </div>
  <p>...</p>
</section>

Attribute Selector

根据不同条件选择element中的attribute

Attribute Present Selector

a[target] {...}

a中只要右target这个attribute，就选中

<a href="#" target="_blank">...</a>

Attribute Equals Selector

a[href="http://google.com/"] {...}

如果a中href attribute = 这个值，那么选中

<a href="/login.php">...</a>

Attribute Contains Selector
*=

a[href*="login"] {...}

只要attribute中包含就选中

<a href="/login.php">...</a>

Attribute Begins With Selector
^=

a[href^="https://"] {...}

attribute由这个开始就选中

<a href="https://chase.com/">...</a>

Attribute Ends With Selector
$=

a[href$=".pdf"] {...}

attribute由这个结束就选中

<a href="/docs/menu.pdf">...</a>

Attribute Spaced Selector
~=

a[rel~="tag"] {...}

attribute的值由空格隔开，隔开的值有值“tag”就选中

<a href="#" rel="tag nofollow">...</a>

Attribute Hyphenated Selector
|=

a[lang|="en"] {...}

attribute的值由“-”隔开，隔开的值有值“en”就选中

<a href="#" lang="en-US">...</a>

Box model

Box Sizing

在这里插入图片描述
box-sizing property
让我们可以定义包含padding和border的宽度和高度（原本的宽度高度只是指content）

box-sizing: border-box
宽度和高度包含padding和border
box-sizing: content-box
默认设置，宽度和高度只包含content

Border

Margin

auto
水平居中element (center an element horizontally)

margin: 0 auto;

inherit

<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>

<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>

<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>

</body>
</html>

margin的负值：
margin负值并不总是后面元素覆盖前面元素，它与元素display属性有关系
　　【1】两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容
　　【2】当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容
　　【3】当inline元素(或inline-block元素)与block元素重叠时，inline元素(或inline-block元素)覆盖block元素的背景，而内容的话，后面的元素覆盖前面的元素

Padding

Padding
Padding不能使用负值，如果使用负值，相当于把这个padding给取消。

Display

Block-level Element in HTML
总是开启新的一行，并且占用整个宽度。
Inline Element in HTML
不开启新的一行，占用必要的宽度

Display

display: none;
不显示，隐藏

display: inline
水平显示，一字排开
元素的高度、宽度及顶部和底部的边距不可设置，元素的宽度就是它包含的内容（文字、图片）的宽度，不可改变

display: block
每一个element自己占一行

display: inline-block
水平显示，可以允许设置width和height属性（用于创建导航栏）

visibility: hidden;
不同于 display: none;，尽管不显示，但还是会占用页面的位置，只是看不见而已

< span> element:

inline container
用来修饰部分文本的style

在HTML中指明要部分修饰的文本

<h2>display: inline</h2>
<div>Lorem ipsum dolor sit amet. <span class="a">Aliquam</span> <span class="a">venenatis</span> goreet. </div>

<h2>display: inline-block</h2>
<div>Lorem ipsum dolor sit amet。 <span class="b">Aliquam</span> <span class="b">venenatis</span> goreet. </div>

<h2>display: block</h2>
<div>Lorem ipsum dolor sit amet. <span class="c">Aliquam</span> <span class="c">venenatis</span> goreet. </div>

然后在CSS中定义这些span的style

<style>
span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
}

span.b {
  display: inline-block;
  background-color: yellow; 
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
}
</style>

Position

Position
定义该元素是否随着窗口滚动而改变

static
relative
fixed
absolute
sticky

Overflow

Overflow
当内容太大怎么办？

visible - Default. The overflow is not clipped. The content renders outside the element’s box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary（不是很大就不加滚动）

overflow-x and overflow-y对两个方向分别定义overflow

z-index

z-index
在这里插入图片描述

Pseudo

Pseudo-class

Anchor Pseudo-classes

当元素有鼠标在它上面时的style；链接被访问与否的格式区别；元素被focus时的style

<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

/* selected link */
a:focus {
  color: yellow;
}
</style>

CSS顺序：

a:link and a:visited
a:hover
a:active
Pseudo-elements

:first-child Pseudo-class

: first-chid

<style>
p:first-child {
  color: blue;
} 
</style>

任何 p 元素，是任何元素的第一个child（只修饰一个 - 第一个）

i:first-child

<style>
p:first-child i {
  color: blue;
}
</style>

是第 i 个child的p元素

:lang Pseudo-class

在修饰的两端定义特殊格式

Pseudo-element

某个元素的第一字或行的style
::first-line
::first-letter
在元素的某段内容前、后插入内容
::before
::after
将用户用光标选中的文本改变格式
::selection
只有这几个属性可被改变color, background, cursor, and outline

Advanced Pseudo

Week 4: Wireframes and Mobile First

Mobile first

mobile-first design
保证用户在手机的使用体验，优先设计手机端的网页。
因为mobile设计更加局限性，什么需要，什么不需要。

3 tips for good mobile-first design

Mobile first = Content first
按层次体系来分布信息内容

Make it easy to navigate
把二级重要的元素放到容易操作的导航栏中的按钮

hamburger menu: 用户可能找不到要找的元素

combo navigation：结合hamburger menu和没用菜单栏。只展示最重要的button，没用hamburger menu，如果找不到，可以再去打开导航栏查询更多选项。
KISS (Keep it simple, stupid)
设计要简单

Wireframes

How To Create Your First Wireframe
Wireframes是什么：

UX (User Experience) 设计中用来设计网站的信息层级(Information Hierarchy)
页面的2D草图（为每一个screen），设计蓝图，无需包含色彩、样式
UI的一致性，某个信息在每个屏幕都同样展示
清晰信息布局
用户如何和interface互动

Week 5: Grid & Responsive Design

Grid

Grid Layout Module

CSS Grid Layout Module
A Grid Layout must have a parent element with the display property set to grid or inline-grid.

<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  /* 设定grid的间距 */
  grid-column-gap: 50px; grid-row-gap: 50px;  grid-gap: 50px 100px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

/* 设定item1在grid中占哪个column到哪个column*/
.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}row

/* 设定item2在grid中占哪个row到哪个row*/
.item2 {
  grid-row-start: 1;
  grid-row-end: 3;
}

</style>
</head>

<body>
一个parent element
<div class="grid-container">
	一个或多个child element
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
</div>
</body>
</html>

An HTML element becomes a grid container when its display property is set to grid or inline-grid. All direct children of the grid container automatically become grid items.

Grid Container

Grid Container
将HTML element的 display 设置为：gird or inline-grid --> Grid container
Grid container包含grid items, 放置在行列中

grid-template-columns

grid-template-columns: auto auto auto auto;

auto 设置有4列，如过元素多于四个，会自动加一行，每一列宽度相同
在这里插入图片描述

 grid-template-columns: 80px 200px auto 40px;

设置每一列的宽度

grid-template-rows
设置每一行的高度

justify-content
“space-evenly” ：column四周环绕、左右间隔距离相同
“space-around”：column四周环绕间隔相同
“space-between” ：左右间隔相同
“center” ：grid全部集中到container中间
“start”：grid全部集中到container开始（左边）
“end”: 全部集中到container结束（右边）

align-content
调整grid在container中的垂直分布

Grid Item

默认每一行的每一列有一个grid item

grid-column
定义grid item占几列

<html>
<head>
<style>
......
.item1 {
  grid-column: 1 / 5;
  gird-column: 1/-1;  从头到尾
}
</style>
</head>

占1，2，3，4列（不包含第五列）

.item1 {
  grid-column: 1 / span 3;
}

占1，2，3列（包含第三列）

grid-row
定义grid item占哪几行

grid-area
定义grid item占的范围（哪几行加哪几列）

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

grid-area: row-line start / column-line start / row-line end / column-line end

还可以用来定义area的名字

<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
</style>
</head>
<body>

这样item1会占据所有叫做’myArea’的grid

 grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';

在这里插入图片描述

grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';

在这里插入图片描述
A Complete Guide to Grid

Responsive Design

响应式网站设计(Responsive Web design)的理念是：
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

Fluid Measurement

%, vw (weight), vh (height)
em (for font): 1 em is current size, .75 is 75%
rem (for font): 1 rem is current size of element

Viewport

用户页面的可见范围，在不同设备上不同。

定义之后要在media queries中使用的width究竟是什么

控制Viewport：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width：页面宽度跟随用户设备宽度
initial-scale=1.0：设置页面第一次加载时的初始放大倍数

Grid View

Grid View
A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.
使用相对长度单位（%）来完成Flexible Layouts

all HTML elements have the box-sizing property set to border-box

* {
  box-sizing: border-box;
}

makes sure that the padding and border are included in the total width and height of the elements.

分配每一个column占总宽度的百分之几

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}

Each row should be wrapped in a < div > The number of columns inside a row should always add up to 12:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Example

Media Queries

Media Queries
让我们在相同的HTML基础上可以以不同的CSS实现适配各种终端的UI效果（比如，桌面端、iPad、双屏幕、折叠设备和移动手机等）。也就是说，我们可以为它们（不同的终端设备）使用相同的HTML，而不是为智能手机维护一个网站，为笔记本电脑、台式机维护另一个网站。著作权归作者所有。

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

注意！！！
style是有顺序的，之后的style会覆盖前面的style，所以要把mobile的放在第一个。按照屏幕从小到大排序。

根据页面大小改变页面展示

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background-color: lightgreen;
}
/*Mobile first: 先设计mobile页面*/
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

/*多个breakpoints*/
@media only screen and (min-width: 600px) {
  /* For tablets: */
 [class*="col-"] {
  width: 45%;
}
}

/* 当浏览器窗口大于768px时，完成下面的动作*/
@media only screen and (min-width: 768px) {
  /* For desktop: */
  [class*="col-"] {
  width: 30%;
}
}
</style>
</head>
<body>

根据页面长宽比例改变展示

<style>
body {
  background-color: lightgreen;
}

/*当页面宽度大于高度（landscape）：执行以下操作*/
@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}
</style>

隐藏元素

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
  background-color: yellow;
  padding: 20px;
}
/* 当页面小于600px时：隐藏div.example元素*/
@media screen and (max-width: 600px) {
  div.example {
    display: none;	/*隐藏*/
  }
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>

设置打印
设置在打印时网页展示的情况

@media print{
	img{
		dispaly: none;
	}
}

Images & Background Images

Images
width: 100%; 图片会随着窗口变小，同时也会大于原始尺寸
max-width: 100%; 图片只会随着窗口变小，不会大于原始尺寸

Background Images
background-size

background-size: “contain”:
随页面变大变小，但是会保持原始长宽比
background-size: 100% 100% :
图片会无限拉伸来填充整个content area，长宽比会被改变
background-size: “cover”:
图片填满整个content area，并不会改变原始长宽比，但是有的部分为了适应area而被裁剪掉

在不同条件下显示不同图片：

<head>
<style>
body {
  background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
  body {
    background-image: url('img_flowers.jpg');
  }
}

</style>
</head>

HanhahnaH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SI 539 网站开发（一）：week1 - week5 HTML & CSS & Grid

SI 539 网站开发AboutRequired Assignments:(300 pts) 4 Quiz Online Assessments (75 pts each)(700 pts) Homework Assignments (100 pts each)(200pts) PortfolioOptional Components:(Up to 60 pts) Discussion section assignments/attendance (5 pts each)(Up to ~70pts) Par
复制链接

扫一扫