Scribd
Upload
3 views

experiment2-report-css

Very good for physics

Uploaded by

redk4782
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

experiment2-report-css

Very good for physics

Uploaded by

redk4782
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

实验类型：□验证 □综合√设计 □开放

课程名称：Web Design

实验题目：CSS 的使用

专 业：CST2024

班级学号：249J57

姓 名：Duem Males

指导老师：Yu Tang

实验时间：2025 年 4 月 29 日
1．Experimental Purpose
Use CSS to design web pages.

（1）
 Make the h1 heading red with underline, the background lightlblue, center it;

 Make the h2 heading blue, set the size to 30px; set the first word size to 200%.

 For the paragraphs: add a 20-pixel green border, a 10-piexel rounded corners; set the width of
border to 70%; make the background lightgreen; set the size to 20px; add 1em of padding on all
sides; center it in the web page; make the last two paragraphs bold.

（2） Create a new file, named as “student number-name-EXP2.html”, then write some CSS codes to
design the layout like this(float or flex box):
Note:
 You can set any color you like for each box.

 You can add some images or text in each box to enrich the content of the web page.

2. Experimental Content (screenshots of codes and web pages)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EXP2 - Restructured</title>
<style>
.main-heading {
color: red;
text-decoration: underline;
background-color: lightblue;
text-align: center;
}

.secondary-heading {
color: blue;
font-size: 30px;
}

.secondary-heading .first-word {
font-size: 200%;
}

.content-block {
border: 20px solid green;
border-radius: 10px;
width: 70%;
background-color: lightgreen;
font-size: 20px;
padding: 1em;
margin: 20px auto;
}

.emphasized {
font-weight: bold;
}

.flex-wrapper {
display: flex;
gap: 10px;
padding: 20px;
justify-content: center;
}

.flex-item {
width: 150px;
height: 150px;
background-color: mediumpurple;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
border-radius: 10px;
}
</style>
</head>
<body>

<h1 class="main-heading">This is the H1 Heading</h1>

<h2 class="secondary-heading"><span class="first-word">This</span> is the H2


Heading</h2>

<div class="content-block">
This is the first paragraph. It is styled with border, padding, background, and width.
</div>
<div class="content-block emphasized">
This is the second paragraph. It is bold.
</div>
<div class="content-block emphasized">
This is the third paragraph. It is also bold.
</div>

<div class="flex-wrapper">
<div class="flex-item">Box 1</div>
<div class="flex-item">Box 2</div>
<div class="flex-item">Box 3</div>
</div>

</body>
</html>

3. Experimental Summary (what you have done and what you


have learned from this experiment)

In this experiment, I successfully created a web page using CSS.

You might also like