【问题标题】:resolving css text media query解析css文本媒体查询
【发布时间】:2016-08-08 22:24:00
【问题描述】:

我正在尝试使我的文本电影、电视节目、游戏具有响应性。我该怎么办?我尝试了媒体查询,但我认为我弄错了。

<!DOCTYPE html>
<html>
<head>
<title>Papaya | Home</title>
<link href='https://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<style type="text/css">
.bg {
    width: 100%;
    height: 110%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -4000;
}
body{
font-family: 'Luckiest Guy', cursive;}

a:hover {color: red;}
a { text-decoration: none; color:white; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }

#one {
position: fixed;
top:180px;
left:200px;
}

#two {
position: fixed;
top:180px;
left:570px;
}

#three {
position: fixed;
top:180px;
left:900px;
}

h1{font-size:70px}

}
</style>
</head>

<body >
<div id="one">
<h1><a href="movies.html"  style="text-decoration:none">MOVIES</a></h1></div>

 <div id="two"> 
<h1><a href="games.html"  style="text-decoration:none">GAMES</a></h1></div>

<div id="three">
<h1><a href="tvshows.html"  style="text-decoration:none">TV SHOWS</a></h1></div>

<div align="center"><img src="images/ball.jpg" class="bg" alt="LOADING.."></div>
</body>
</html>

【问题讨论】:

    标签: html css text media-queries


    【解决方案1】:

    首先,编写 HTML 和 CSS n 个单独的文件。它被认为是 Web 开发中的最佳实践;)然后,为网站添加响应能力的最佳方法是安装 Bootstrap。 将其复制并粘贴到您的 html 文档的开头:

    这是一个 CDN(内容交付系统)链接。它将从他们的网站中提取引导功能,并允许您为您的网站添加响应能力。

    这是 Bootstrap 文档链接:

    http://getbootstrap.com/getting-started/

    我的回答可能看起来有点冗长和复杂,但事实并非如此。这就是当今专业人士和公司制作现代响应式网站的方式!希望这可以帮助。

    【讨论】:

    • 好的,谢谢,我马上试试……谢谢。暂时把 CSS 放在一起……
    • 我很困惑你能告诉我具体该怎么做吗?这会很有帮助..
    猜你喜欢
    • 2021-03-10
    • 1970-01-01
    • 2022-01-25
    • 1970-01-01
    • 2021-08-23
    • 2012-02-15
    • 2011-07-31
    • 2013-03-05
    相关资源
    最近更新 更多