从PSD文件大小创建响应式网页 [英] Creating a responsive web page from PSD file issue in size
问题描述
我正在尝试使用PSD文件创建HTML网页的控件我有
我写了一个示例程序它工作正常，但当我从psd文件复制大小和CSS
我的网格不能正常工作，外面显示的内容。
你能帮忙吗我用它来定义cotrols的控件尺寸
响应
我尝试过的事情：
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8>
< meta http-equiv =X-UA-Compatiblecontent =IE = edge >
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< title> Untitled Document< ; / title>
<！ - Bootstrap - >
< link href =css / bootstrap.css =stylesheet>
< link href =Design.css =stylesheet>
<！ - 支持HTML5元素和媒体查询的IE8 HTML5垫片和Respond.js - >
<！ - 警告：Respond.js如果您通过文件查看页面不起作用：// - >
<！ - [if lt IE 9]>
< script src =https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js>< / script>
< script src =https：// oss.maxcdn.com/respond/1.4.2/respond.min.js\"></script>
<！[endif] - >
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js>< / script>
<脚本>
$（文件）.ready（function（）{
$（div.bhoechie-tab-menu> div.list-group> a）。 click（function（e）{
e.preventDefault（）;
$（this）.siblings（'a.active'）。removeClass（active）;
$（this）.addClass（active）;
var index = $（this）.index（）;
$（ div.bhoechie-tab> div.bhoechie-tab-content）。removeClass（active）;
$（div.bhoechie-tab> div.bhoechie-tab-content） .eq（index）.addClass（active）;
}）;
}）;
< / script>
< / head>
< body>
<！ - jQuery（Bootstrap的JavaScript插件所必需的） ） - >
< script src =js / jquery-1.11.3.min.js>< / script>
< ; - 包括所有编译的插件（下面），或根据需要包含单个文件 - >
< script src =js / bootstrap.js>< / script>
< / body>
< / html>
以下是css的内容
@charset utf-8;
/ * CSS Document * /
/ * bhoechie tab * /
div.bhoechie-tab-container {
宽度：1198px;
身高：734px;
border-width：1px;
border-color： ＃d4d4d4;
border-style：solid;
background-color：#ffffff;
}
div .bhoechie-tab-menu {
宽度：300px;
身高：727px;
背景色：＃003778;
}
div.bhoechie-tab-content {
background-color：#ffffff;
}
div.bhoechie-tab div.bhoechie-tab-content：not（.active）{
display：none;
}
（document）.ready（function（）{
（div.bhoechie-tab-menu> div.list-group> a）。click（function（e）{
e.preventDefault（）;
（this）.siblings（'a.active'）。removeClass（active）;
hi ,
I am trying to create an control for HTML web page using a PSD file i have
I wrote a sample program it works fine , but when i copy size and CSS for a div
from psd file my grid is not working properly ,contents of displayed outside.
Can you please help me with it and also do we define control sizes for cotrols
in responsive
What I have tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="Design.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
$("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
});
});
</script>
</head>
<body>
<!-- flight section -->
Flight Reservation
<!-- train section -->
Train Reservation
<!-- hotel search -->
Hotel Directory
Restaurant Diirectory
Credit Card
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Below are contents of css
@charset "utf-8";
/* CSS Document */
/* bhoechie tab */
div.bhoechie-tab-container{
width: 1198px;
height: 734px;
border-width: 1px;
border-color: #d4d4d4;
border-style: solid;
background-color: #ffffff;
}
div.bhoechie-tab-menu{
width: 300px;
height: 727px;
background-color: #003778;
}
div.bhoechie-tab-content{
background-color: #ffffff;
}
div.bhoechie-tab div.bhoechie-tab-content:not(.active){
display: none;
}解决方案(document).ready(function() {
("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
e.preventDefault();
(this).siblings('a.active').removeClass("active");
这篇关于从PSD文件大小创建响应式网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
