0 0 0 8 - CSS样式文件,Web密训营,Web开发,鱼C论坛

谦虚求学 发表于 2017-4-18 09:51:22

不二如是发表于 2017-1-9 12:24
文字，做得好看，一样滴～

不二版主开个视频教程吧看文字眼睛花啊，出来也给大家露下脸，你展你的才华{:7_141:}

谦虚求学 发表于 2017-4-18 09:54:52

哎呀文盲真可怕字都打错了应该是 ‘一展才华’{:10_269:}

wangguohui 发表于 2017-6-22 17:17:28

/*传说中的超级CSS*/
@charset "UTF-8";
html{
height: 100%;
color: #FF0088;
font-family: sans-serif;
}
body{
background: url(314e251f95cad1c862803b2e7d3e6709c93d5184.jpg) center center;
background-size: cover;
font-size: 33px;
position: relative;
margin: 0;
padding: 0;

}
#container{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
text-transform: translateY(-50%);

}
a{
color: #FFFFFF;
border: 1px solid #33FFFF;
border-radius: 10px;
font-size: 55px;
background: #33FFFF;
text-transform: none;
padding: 10px 66px;

}

页面文字没有上下居中，什么情况啊

MSK 发表于 2017-7-5 17:01:48

交！作！业！{:9_237:}

css：

@charset 'utf-8';
html{
            height:100%;
         }
         body{
            background: url(http://img2.imgtn.bdimg.com/it/u=330117910,1717224124&fm=26&gp=0.jpg) center center;
            background-size:cover;
            text-align: center;
            margin:0;
            padding:0;
            color:red;
            position:relative;
            top:50%;
         }
         #link{
            width:100%;
            position:absolute;
            transform: translateY(-50%)
         }
         h1{
            font-family: 宋体;
            font-size:80px;
            margin-bottom:5px;
         }
         p{
            margin-bottom:60px;
            color:orange;
            font-size:20px;
         }
         a{
            color:#FFF;
            border:5px solid aqua;/*边框高度与颜色*/
            border-radius:15px;/*圆角弯曲度*/
            padding:15px 99px;/*边框大小*/
            text-decoration: none;
            font-size:16px;
            background:cyan;/*填充色*/
         }

html：

<!doctype html>
<html>
<head>
   <title>可爱的超链接</title>
   <meta charset='utf-8'>
   <link href='008.css' rel='stylesheet'>
   </style>
</head>
<body>
   <div id='link'>
         <h1>我爱鱼C</h1>
         <p>让编程改变世界</p>
         <a href='http://www.fishc.com'>传送门</a>
   </div>
</body>
</html>

aswyamato1989 发表于 2017-7-5 22:26:57

交作业：

xl7613 发表于 2017-8-2 15:01:14

学习学习{:5_92:}

易改乌江水 发表于 2018-1-21 23:29:58

本帖最后由易改乌江水于 2021-6-10 11:49 编辑

@charset "UTF-8";
html{
height: 100%;
color: #5599FF;
font-family: sans-serif;
}
body{
background: url(background.jpg);
background-size: cover;
background: url(background.jpg) center center;
}
#ha
{
width: 100%;
text-align: center;
}
h1
{
font-size: 66px;
margin-bottom: 22px;
}
a
{
font-size: 20px;
background: #FFDD55;
padding:9px 22px;
text-decoration: none;
color: #FFF;
border:3px solid #FFDD55;
border-radius: 3px;
margin: 5px 33px 5px 33px;
这是CSS
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>易改乌江水鱼C学习</title>
<link href="yucxue.css" rel="stylesheet">
</head>
<body>
<div id="ha">
<h1>易改乌江水爱鱼C</h1>
<p>WWW.FishC.com</p>
<a href="http://bbs.fishc.com/thread-81254-1-1.html">HTML5-庖丁解牛-0008</a>
<a href="http://bbs.fishc.com">
<img src="fishc.png" width="359" height="84" />
</a>
</body>
</html>
这是HTML（专门为了学不二老师的课写的）
-----------------------------------------------------2021\6\10高考over-----------------------------------------
我当年写了个啥，我不认识当时的我，怎么可以这么拉跨啊（）

ttyhtg 发表于 2018-2-3 21:57:34

就因为第一行一个星号不小心达成了中文符号，让我玩了半天的找不同游戏，这要是在学校估计得挨一巴掌

helingyuan 发表于 2018-2-9 03:56:41

强烈支持！

likesunshine 发表于 2018-3-8 16:55:52

也要举一反三{:10_256:}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<style type="text/css">
html,body{
height: 100%;
color: #FF0088;
font-family: sans-serif;
}
body{
background: url(background.jpg);
background-size:cover;
margin: 0;
padding: 0;
position: relative;
}
#container{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
h1{
font-size: 66px;
margin-bottom: 22px;
}
p{
font-size: 33px;
margin-bottom: 55px;
}
a{
font-size: 55px;
color: #33FFFF;
border: 1px solid #33FFFF;
border-radius: 10px;
padding:10px 66px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FishC.com - 继续学习</p>
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
<a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
</div>
</body>
</html>

likesunshine 发表于 2018-3-8 17:05:29

本帖最后由 likesunshine 于 2018-3-8 17:08 编辑

展示
html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<link href="background.css" rel="stylesheet">
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FishC.com - 继续学习</p>
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
<a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
</div>
</body>
</html>

CSS：
@charset "utf-8";
html,body{
height: 100%;
color: #FF0088;
font-family: sans-serif;
}
body{
background: url(background.jpg);
background-size:cover;
margin: 0;
padding: 0;
position: relative;
}
#container{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
h1{
font-size: 66px;
margin-bottom: 22px;
}
p{
font-size: 33px;
margin-bottom: 55px;
}
a{
font-size: 55px;
color: #33FFFF;
border: 1px solid #33FFFF;
border-radius: 10px;
padding:10px 66px;
text-decoration: none;
}

rock5442107 发表于 2018-5-26 12:13:26

這是HTML的內容
<!DOCTYPE html>
<html>
<head>
<meata charset="UTF-8">
<title>歡迎來到HTML世界</title>
<link href="Dabao.css" rel="stylesheet">
</style>
</head>

<body>
<div id="container">
<h1>我愛魚C</h1>
<p>WWW.FishC.com - 讓編程改變世界</p>
<a >傳送門</a>
</div>
</body>
</html>

這是CSS樣式表的內容
/*用来制定样式文件的编码格式*/
@charset "UTF-8";
html,body{
height: 100%;
color: #00FF00;
font-family: sans-serif;
}
body{
background: url(KED08.jpg);
background-size: cover;
margin: 0;/*養成初始化好習慣*/
padding: 0;
position: relative;
}
#container{
width:100%;
text-align: center;
position: absolute;
top:50%;
transform: translateY(-50%);
}
h1{
font-size: 66px;
margin-bottom: 22px;
}
p{
font-size: 33px;
margin-bottom: 22px;
}
a{
font-size: 55px;
background: #000000;
color:#FFFFFF;
border:1px solid #0000FF;
border-radius: 10px;
padding:10px 66px;
text-decoration: none;
}

土耳其东木白 发表于 2018-5-29 14:09:59

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<link href="0008CSS.css" rel="stylesheet">
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FihsC.com - 让编程改变世界</p>
<a >传送门</a>
</div>
<div id="Gucci">
<h1>I love Gucci</h1>
<p>Gucci Gucci Parada Parada</p>
<a >传送门</a>
</div>
<div id="Prada">
<h1>脚踩Prada的女魔头</h1>
<p>WWW.FihsC.com - 让编程改变世界</p>
<a >传送门</a>
</div>
</body>
</html>

@charset "UTF-8";

html,body{
height: 100%;
color: #FA3;
font-family: cursive;
}
h1{
font-size: 33px;
margin-bottom: -20px;
}
p{
font-size: 22px;
margin-bottom: 22px;
}
a{
font-size: 33px;
color: #fff;
background: #0F0;
border: 5px solid #0f0;
border-radius: 10px;
padding: 1px 11px;
text-decoration: none;
}
body{
background: url(pic_02.png)center center;
background-size: cover;
margin: 0;
padding:0;
position: relative;
}
#container{
width: 100%;
text-align: center;
position: absolute;
top: 60%;
transform: translateY(-50%);
}
#Gucci{
width: 100%;
text-align: center;
position: absolute;
top: 20%;
transform: translateY(-50%);
}
#Prada{
width: 100%;
text-align: center;
position: absolute;
top: 40%;
transform: translateY(-50%);
}

我爱鱼C！ 发表于 2018-7-15 07:55:44

交作业喽:
css:
@charset "UTF-8";
html,body {
height: 100%;
color: #FF0088;
font-family: sans-serif;
}
body {
background: url("background.jpg") center center;
background-size: cover;
margin: 0;
padding: 0;
position: relative;
}
#container {
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
h1 {
font-size: 66px;
margin-bottom: 22px;
}
p {
font-size: 33px;
margin-bottom: 22px;
}
a {
font-size: 55px;

}
a {
background: #33ffff;
color: #fff;
border: 1px solid #33ffff;
border-radius: 10px;
padding: 10px 66px;
text-decoration: none;
}
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<link href="index.css" rel="stylesheet">
</head>
<body>
<div id="container">
<h1>我爱鱼Ｃ</h1>
<p>www.fishc.com-让编程改变世界</p>
<a >咻!</a>
</div>
</body>
</html>

soulwyb 发表于 2018-10-11 23:38:35

HTML
<!DOCTYPE html>
<html>

<head>
<title>
   XXX
</title>
<meta charset="utf-8">
<link href="008.css" rel="stylesheet">
</head>

<body>
<div id="container">
   <h1>我爱鱼C</h1>
   <p>www.FishC.com - 让编程改变世界</p>
   <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</div>
</body>

</html>
CSS文件
@charset 'utf-8';
html {
height: 100%;
color: #FF0088;
/* font-family: sans-serif; */
font-family: sans-serif;
}

body {
background: url(background.jpg) center center;
background-size: cover;
margin: 0;
padding: 0;
/*position: relative;*/
}

#container {
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}

h1 {
font-size: 66px;
margin-bottom: 22px;
}

p {
font-size: 33px;
margin-bottom: 22px;
}

a {
font-size: 55px;
color: rgb(243, 211, 107);
border: 1px solid #33ffff;
border-radius: 10px;
padding: 10px 66px;
text-decoration: none;
background: #33ffff
}

phszhuli 发表于 2019-3-27 15:36:45

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<link href="0001.css" rel="stylesheet">
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FishC.com - 让编程改变世界</p>
<a >传送门</a>
</div>
</body>
</html>

html

/*css文件*/
@charset"UTF-8";
body{
background: url(1.png)center center;/*图片加center center，就能保持一直显示中间位置，如果不加，当页面缩小到小于图片尺寸时，只能出现图片顶部、左侧的内容*/
background-size: cover;/*不会产生平铺的效果，只会一张图放大缩小*/
margin: 0;
padding: 0;/*潜规则，提高自主控制*/
position: relative;/*若设置containertop属性，container必须绝对定位，body相对定位*/

}

html,body{/*为了确保照片自适应屏幕显示，需要给body以及body的父级（html）设置height属性，使之充满全屏。*/
height: 100%; /* height如果不设置100%，就会出现重复
*/
color: #ffffff;
font-family:sans-serif;

}
#container{/*定义ID选择器必须添加#号*/
width: 100%;
text-align: center;/*文字居中*/
position: absolute;/*绝对定位*/
top: 50%;
transform: translateY(-50%);/*使container在Y轴方向上移动50%*/
}
h1{
font-size: 55px;
margin-bottom: 22px;/*控制行间距，h1标题与下面p之间的距离*/
}
p{
font-size: 22px;
margin-bottom:22px;
}
a{
font-size:33px;
background: #66B0A7;
color:#fff;
/*border: 5px double #ffffff;/*宽度。样式。颜色*/
border-radius: 10px;
padding: 10px 66px;/*上下两侧10px，左右两侧66px*/
text-decoration: none;/*定义无边框*/
}

CSS

freeulove 发表于 2019-6-18 14:44:27

感谢你们的付出

苏苏请认真学习 发表于 2019-8-31 17:21:53

我去，都这么厉害，我都不会

你在意在便在 发表于 2019-10-26 09:18:35

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>让编程改变世界</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.fishC.com--让编程改变世界</p>
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</div>
</body>
</html>

------------------------------------------css 分割线 ------------------------------------------------------------
@charset "utf-8";

html,body {
color: pink;
height: 100%;
font-family: sans-serif;
}

body {
background-size: cover;
background: url(image/003.jpg) center center;
margin: 0;
padding: 0;
position: relative;
}

#container {
position: absolute;
text-align: center;
width: 100%;
top: 50%;
/* container 这个div移到页面50% 下方，
想要真正实现内容也居中，则需要Y轴偏移-50%即可； */
transform: translateY(-50%);
/* border: 1px solid red; */
}

h1 {
font-size: 66px;
margin-bottom: 22px;
}

p {
font-size: 33px;
margin-bottom: 22px;
}

a {
border:1px solid gray;
border-radius: 10px;/* 四边圆角 */
/* background:#33ffff;*/
color:white;
font-size: 55px;
margin:10px 33px;
text-decoration:none;
}

酒醉三分醒 发表于 2020-4-17 11:24:44

打卡

页: 1 [2] 3

鱼C论坛's Archiver