Loading

Stanford CS142: Web Applications Week1 Project1: HTML and CSS

目录

项目地址：CS142 Project 1: HTML and CSS (stanford.edu)

HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="styleX.css" />
    <title>CS142 Project #1</title>
  </head>
  <body>
    <p class="a" id="A">A</p>
    <p class="a b">B</p>
    <p class="a">C</p>
    <p class="a b">D</p>
    <p class="a">E</p>
    <p class="c">F</p>
  </body>
 </html>

StyleA

p { 
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  height: 100px;
  width: 100px;
  font-size: 40px;
  font-family: Tahoma;
  border-top: 1px solid #5353A6;
}

p.a.b{
  background-color: #dfe1e7;
}

p.a{
  background-color: #eeeff2;
}

p.c{
  line-height: 100px;
  background-color:  #687291;
  height: 100px;
  width: 100px;
  border: 4px solid black;
}

我个人遇到的困难，主要是如何让所有的元素居中对齐

一开始部分代码是这样写的：

p {
  position: relative;
  left: 50%;
}

这样子只是左边对齐，并不是题目中要求的效果，因为left和margin-left是按照border最左侧对齐的，所以这样是在设置左对齐的效果。

但是按照以下设置，就可以让元素都设置成居中的形式:

p {
  margin-left: auto;
  margin-right: auto;
}

StyleB

p {
  display: inline-block;
  font-family: Tahoma;
  font-size: 40px;
  
  margin: 10px;
  width: 80px;
  height: 150px;
  background-color: #eeeff2;
  padding-left: 10px;

  border-left-style: dotted;
  border-left-width: 10px;
  border-left-color: #D0D0FF;
}

p.c {
  position: absolute;
  margin-top: 100%;
}

#A:hover {
  background-color: yellow;
  color: goldenrod;
  cursor: grab;
}

这里需要单独去了解一下属性cursor，整体难度不大。

感悟

要多看ecture和CSS 参考手册 (w3school.com.cn)，善用google。

posted @ 2022-06-20 15:40  Frank_Ou  阅读(322)  评论(0)  编辑  收藏  举报