复盘最近学了一些网站制作程序开发的知识,可以说一个网站内容可以看到的大部分内容,经过了网页的基础结构、内容修改,还有与Java代码有关的编写。多个结构嵌套,运行时候的script纠错,也都是给网站看起来像一个界面还不错,不过仔细看过CSS觉得好的开发应是人性化的。具体说来,排版应该有不同级的标题,字体和边框都相应的设置好。
进行这个项目从replit.com 开始,
HTML, CSS, JS 的index.html 实战,基本上从页面布局来知道程序的基本框架就从 !DOCTYPE html 到完成一个style.css 之后形成网页内容。内容既包括了标题 <h1> <h2> <h3>,内容也有具体的<p> 随意发挥</p>,得到了一个menu.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- HTML is visible to users goes inside of body-->
<h1>Mooncake Connections </h1>
<h2>A page for five plums stuffing for the mooncake, add fresh ice layer to gather</h2>
<p> wow cookies, I prefer cookies and delicious mooncakes share with you.
<p>Type 1: Salty Caremel Cookies </p>
<p>Type 2: Egg Yoggi Nut Cookies </p>
<p>Type 3: Su Style Mooncakes </p>
<p>Type 4: Chocolate Mooncakes </p>
</p>
<body>
然后各类段落CSS Reference 可参考以下https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index
比如background 可以选择颜色、透明度、位置等;background - position, attachment etc.
border 是对文本框的一些内容定义
Contain 可以对context 内容的修饰加以调整。
就好像一个Word文本框从外框到内部的填充和文字的layout都可以局部调整。
<img>scr="https://en.wikipedia.org/wiki/Mooncake#/media/File:Mooncake_3-4,_lotus_seed_paste.jpg" alt
</img>
<a href="https://https://pixabay.com/zh/photos/donkey-desert-siwa-egypt-oasis-8575524/"></a>
<!--Colleen's proposal: can be an image made into a link? -->
<script src="script.js"></script>
<link rel ="stylesheet" href = "/style.css">
</body>