在上一节课学习了HTML后，我们又迎来了更新得挑战，因为学习了HTML，所以接下来自然而然得就是运用标记语言来制作网站，制作网站的第一步，通过基本语法先来制作出了网页得标题，因为我本人比较热爱足球，最喜欢的运动员就是葡萄牙的C罗，所以我准备制作一个c罗的简易网站，通过标题字标记，还有排版，先控制了网页的外观和布局，用css设置网页默认字体，设置网页背景以及网页边缘与浏览器窗口的距离，接下来就是内容容器样式，最大宽度像素，以及各种距离，h3设置三级标题样式，文字颜色红色，标题下方空白，还有图片样式的像素，以及表单元素基础样式，单选框和复选框样式，按钮组样式，在这些多种选择器后，就到了最重要的网页主体内容，包括c罗的简单介绍和图片，图片的插入和图片的样式都是我们通过代码来实现的，最后出现在网页上的内容就是c罗的介绍和照片，以及俱乐部的复选框，和国籍的单选框，还有国家队进球数输入框和个人简介文本框，都是只读界面，不能修改，在最后在网页中加入了超链接和隐藏页面，这两个作用出现在代码中但是我目前还没有实现，还在慢慢发现这些问题，总之在第一次尝试做一个网站后，发现想做出一个好的网站还是非常困难的，虽然学会了很多标记的方法，但是总是达不到自己想要的那种格式，比如列表，段落，字体等不同的格式，可以看出来目前还是学到了皮毛，在往后的时间如果想制造出更好的网页还是要多积累一下知识，不能只停留在简单的地方，要更精益求精，接下来展示的就是我的代码，就是今天尝试制造出的c罗的个人网页，期待之后在制造网页上的学习，制造出来更加完美更加美观的网页。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>C罗个人介绍</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
margin: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px #ddd;
}
h3 {
color: #e63946;
margin-bottom: 10px;
}
img {
border-radius: 8px;
margin: 10px 0 20px;
}
input, select, textarea {
margin: 8px 0;
padding: 6px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="radio"], input[type="checkbox"] {
width: auto;
margin-right: 10px;
}
.btn-group {
margin-top: 15px;
}
input[type="submit"], input[type="reset"], input[type="button"] {
width: auto;
padding: 8px 15px;
margin-right: 10px;
background-color: #457b9d;
color: white;
border: none;
cursor: pointer;
}
input[type="reset"] {
background-color: #e63946;
}
input[type="button"] {
background-color: #1d3557;
}
textarea {
resize: none;
}
</style>
</head>
<body>
<div class="container">
<center>
<h3>克里斯蒂亚诺·罗纳尔多</h3>
<img src="C:\Users\17740\Desktop\7878.jpg" alt="C罗比赛照片" width="600" height="1000
">
<hr>
<form action="success.html" method="get">
姓名:<input type="text" name="username" value="克里斯蒂亚诺·罗纳尔多" readonly><br>
出生日期:<input type="text" name="birthdate" value="1985-02-05" readonly><br>
国籍:
<input type="radio" name="nationality" value="portugal" checked>葡萄牙
<input type="radio" name="nationality" value="other" disabled>其他
<br>
场上位置:
<input type="checkbox" name="position" value="LW" checked>左边锋
<input type="checkbox" name="position" value="ST" checked>中锋
<input type="checkbox" name="position" value="RW" checked>右边锋
<br>
现效力俱乐部:
<select name="club">
<option>---请选择俱乐部---
<option value="al-nassr" selected>利雅得胜利</option>
<option value="real-madrid">皇家马德里</option>
<option value="man-united">曼联</option>
<option value="juventus">尤文图斯</option>
</select>
<br>
国家队进球数:<input type="text" name="goals" value="128球" readonly><br>
个人简介:
<textarea name="content" rows="10" cols="80" readonly>
克里斯蒂亚诺·罗纳尔多(C罗)是葡萄牙职业足球运动员，被誉为足球史上最伟大的球员之一。
职业生涯效力于曼联、皇家马德里、尤文图斯等顶级俱乐部，现效力于沙特利雅得胜利。
主要荣誉：
- 5次金球奖
- 4次欧洲冠军联赛冠军
- 2016年欧洲杯冠军
- 2019年欧洲国家联赛冠军
- 英超、西甲、意甲联赛冠军
C罗以惊人的进球能力、职业精神和领导力闻名,保持着欧冠和国家队历史进球纪录。
</textarea>
<input type="hidden" name="id" value="CR7"><br>
<div class="btn-group">
<input type="submit" value="查看详细数据">
<input type="reset" value="重置">
<input type="button" value="关注官方" onclick="javascript:alert('关注C罗官方账号')">
<input type="image" src="C:\Users\17740\Desktop\7777.jpg" alt="官方标志" width="80">
</div>
</form>
</center>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
