个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我的网站 www.nimaiwalsh.com除了我的 iPhone 6 上的 Mobile Safari 之外，在所有浏览器和不同大小下都显示正常。右侧出现一条细白线。我已经尝试了所有方法，并且查看了其他一些关于 overlow-x: hidden 的建议。
如有任何帮助，我们将不胜感激!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Nimai Walsh">
<meta name="description" content="Web Designer and Developer based in Sydney, Australia. Specialising in responsive and pageless designed sites and offering freelance servives for a number of projects.">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="vendors/css/animate.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="resources/css/queries.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,300italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:100,300,400' rel='stylesheet' type='text/css'>
<title>Nimai Walsh - Web Designer and Developer</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/img/NW-logo.svg" alt="Nimai Walsh Logo" class="logo">
<ul class="main-nav js--main-nav">
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a class="mobile-nav-btn js--mobile-nav"><i class="ion-navicon-round"> </i></a>
</div>
</nav>
<div class="heading-text-box">
<h1>Web Designer/Front-End Developer</h1>
<p class="long-copy">Hi, I'm Nimai Walsh. A web designer and developer currenly based in Sydney, Australia. I specialise in responsive and simple pageless designed sites.</p>
</div>
</header>
<section class="section-portfolio js--section-features" id="portfolio">
<div class="row">
<h2>Portfolio</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="project-box js--wp-1">
<div>
<img src="resources/img/omnifood-project.jpg" alt="Omnifood web project">
</div>
<div class="project-details">
<ul>
<li><i class="ion-monitor"></i>Web</li>
<li><i class="ion-code-working"></i>HTML5, CS3, jQuery</li>
<li><i class="ion-compose"></i>A fictional site created as a project to develop my skills</li>
</ul>
</div>
<div>
<a href="projects/omnifood/index.html" target="_blank" class="btn btn-full">Visit site</a>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="project-box js--wp-2">
<div>
<img src="resources/img/blog-project.jpg" alt="Nims Playhouse blog project">
</div>
<div class="project-details">
<ul>
<li><i class="ion-monitor"></i>Web</li>
<li><i class="ion-code-working"></i>Wordpress CMS</li>
<li><i class="ion-compose"></i>A personal blog created to explore joyful things in life</li>
</ul>
</div>
<div>
<a href="http://www.nimsplayhouse.com" target="_blank" class="btn btn-full">Visit site</a>
</div>
</div>
</div>
<div class="col span-1-of-3">
<div class="project-box js--wp-3">
<div>
<img src="" alt="">
</div>
<div class="project-details">
<ul>
<li><i class="ion-monitor"></i></li>
<li><i class="ion-code-working"></i></li>
<li><i class="ion-compose"></i>A space for my next project. Could it be your site?</li>
</ul>
</div>
<div>
<a href="" target="_blank" class="btn btn-full">Visit site</a>
</div>
</div>
</div>
</div>
</section>
<section class="section-about" id="about">
<div class="row">
<h2>About me</h2>
</div>
<div class="row">
<img id="profile-pic" src="resources/img/profile-pic.jpg" alt="Picture of Nimai Walsh" class="js--wp-4">
</div>
<div class="row">
<div class="col span-2-of-3">
<p>I completed a Bachelor of Multimedia in 2007, worked as a Web Publisher, a Senior Support Analyst and joined the Royal Australian Navy in 2010. I am completing my service with the Navy at the end of this year to persue my deferred career as a Web Designer and Developer.</p>
<p>During the past 6 months I have completed a number of online courses in my own time to develop my skills.</p>
<p>I am currently based in Sydney, Australia, but planning to re-locate to Brisbane in 2017.</p>
<div id="skills" class="clearfix">
<h3>Skills</h3>
<ul>
<li><i class="ion-social-html5-outline"></i> HTML5</li>
<li><i class="ion-social-css3-outline"></i> CSS3</li>
<li>jQuery</li>
</ul>
</div>
</div>
<div class="col span-1-of-3 twitter-feed">
<a href="https://twitter.com/nimaiwalsh" target="_blank"><i id="twitter-icon" class="ion-social-twitter-outline js--twitter-icon"></i></a>
<div id="tweecool" class="twitter-widget js--twitter-widget"></div>
</div>
</div>
</section>
<section class="section-contact" id="contact">
<div class="row">
<h2>I look forward to hearing from you</h2>
</div>
<div class="row">
<ul class="contact-social js--wp-5">
<li class="twitter"><a href="https://twitter.com/nimaiwalsh" target="_blank"><i class="ion-social-twitter"></i></a></li>
<li class="linkedin"><a href="https://au.linkedin.com/in/nimaiwalsh" target="_blank"><i class="ion-social-linkedin"></i></a></li>
</ul>
<p>+61403676341</p>
<p><a href="mailto:nimai@nimaiwalsh.com">nimai@nimaiwalsh.com</a></p>
</div>
<form method="post" action="#" class="contact-form js--wp-6">
<div class="row">
<div class="col span-1-of-3">
<label for="name">Name</label>
</div>
<div class="col span-2-of-3">
<input type="text" id="name" placeholder="Your name" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="email">Email</label>
</div>
<div class="col span-2-of-3">
<input type="email" id="email" placeholder="Your email" required>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="phone">Phone</label>
</div>
<div class="col span-2-of-3">
<input type="number" id="phone" placeholder="Your phone number">
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label for="message">Message</label>
</div>
<div class="col span-2-of-3">
<textarea name="message" id="message" placeholder="Your message"></textarea>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label> </label>
</div>
<div class="col span-2-of-3">
<input type="submit" value="Hit me up">
</div>
</div>
</form>
</section>
<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<a href="#portfolio"><li>Portfolio</li></a>
<a href="#about"><li>About</li></a>
<a href="#contact"><li>Contact</li></a>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-links">
<a href="https://twitter.com/nimaiwalsh" target="_blank"><li><i class="ion-social-twitter"></i></li></a>
<a href="https://au.linkedin.com/in/nimaiwalsh"><li><i class="ion-social-linkedin"></i></li></a>
</ul>
</div>
</div>
<div class="row">
<p>Copyright © 2016 Nimai Walsh</p>
</div>
</footer>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!-- Waypoints jQuery plugin -->
<script src="vendors/js/jquery.waypoints.min.js"></script>
<!-- Enables old browsers to understand and execute CSS media queries -->
<script src="https://cdn.jsdelivr.net/respond/1.4.2/respond.min.js"></script>
<!-- Enables old browsers to use and style HTML 5 scripts -->
<script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script>
<!-- Allows use of CSS3 pseudo-classes in IE 6, 7 and 8-->
<script src="https://cdn.jsdelivr.net/selectivizr/1.0.3b/selectivizr.min.js"></script>
<!-- jQuery twitter feed -->
<script src="vendors/js/tweecool.js"></script>
<script src="resources/js/script.js"></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-77429553-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>/*---------------------------------------*/
/* -- BASIC SETUP and GLOBAL SETTINGS -- */
/*=======================================*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body {
color: #707478;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
width: 100%;
overflow-x: hidden;
}
.clearfix { zoom: 1; }
.clearfix:after {
content: ' ';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/*---------------------------------------*/
/* -- RE-USABLE COMPONENTS -- */
/*=======================================*/
.row {
max-width: 1140px;
margin: 0 auto;
}
section { padding: 70px 0; }
/* Links */
a:link,
a:visited {
color: #f90;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
a:hover,
a:active,
.twitter-feed a i:hover,
.twitter-feed a i:active {
color: #dd8500;
}
/* Headings */
h1, h2, h3 {
font-family: 'Raleway', 'Arial', sans-serif;
}
h1 {
font-weight: 200;
font-size: 220%;
color: #fff;
word-spacing: 4px;
letter-spacing: 2px;
text-transform: uppercase;
}
h2 {
font-weight: 300;
font-size: 150%;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
}
h2:after {
display: block;
height: 2px;
width: 80px;
background-color: #f90;
content: " ";
margin: 0 auto;
margin-top: 20px;
}
h3 {
font-weight: 300;
font-size: 120%;
text-transform: uppercase;
}
/* Paragraph */
.long-copy {
font-size: 110%;
font-weight: 300;
line-height: 145%;
letter-spacing: 1px;
width: 70%;
margin-left: 15%;
color: #FFAD33;
}
/* Buttons */
.btn:link,
.btn:visited,
input[type=submit] {
display: inline-block;
text-decoration: none;
border-radius: 10px;
padding: 10px 20px;
-webkit-transition: border 0.2s, background-color 0.2s;
transition: border 0.2s, background-color 0.2s;
}
.btn-full:link,
.btn-full:visited,
input[type=submit]{
color: #fff;
border: 2px solid transparent;
background-color: #f90;
}
.btn-full:hover,
.btn-full:active,
input[type=submit]:hover,
input[type=submit]:active {
border: 2px solid #DD8500;
background-color: #DD8500;
}
/*---------------------------------------*/
/* -- HEADER SECTION -- */
/*=======================================*/
header {
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.7), rgba(9, 112, 84, 0.78)), url(img/header-min.jpg);
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(9, 112, 84, 0.78)), url(img/header-min.jpg);
background-position: center;
background-size: cover;
background-attachment: fixed;
height: 100vh;
}
.heading-text-box {
position: absolute;
width: 80%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.logo {
height: 80px;
width: auto;
margin-top: 20px;
float: left;
}
/* Main nav */
.main-nav {
float:right;
margin-top: 50px;
list-style: none;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
text-decoration: none;
color: #fff;
padding: 8px 0;
text-transform: uppercase;
border-bottom: 2px solid transparent;
-webkit-transition: border-bottom 0.2s;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #FF9900;
}
/* Sticky nav */
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(255, 255, 255, 0.98);
box-shadow: 0 1px 2px #837c7c;
z-index: 99;
}
.sticky .logo {
height: 45px;
width: auto;
margin: 5px 0;
}
.sticky .main-nav { margin-top: 15px; }
.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
color: #707478;
padding-bottom: 9px;
}
.sticky .mobile-nav-btn {
margin-top: 8px;
}
/* Mobile nav */
.mobile-nav-btn {
float: right;
margin-top: 20px;
cursor: pointer;
display: none;
}
.mobile-nav-btn i {
font-size: 180%;
}
/*---------------------------------------*/
/* -- PORTFOLIO SECTION -- */
/*=======================================*/
.project-box {
background-color: #f8f8f8;
color: #707478;
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 2px #837c7c;
}
.project-box div ul {
list-style: none;
padding-bottom: 10px;
padding-top: 20px;
line-height: 145%;
}
.project-box div li i {
font-size: 123%;
margin-right: 15px;
color: #dd8500;
}
.project-box div img {
width: 100%;
border-radius: 5px;
padding: 5px;
border: 5px solid #097054;
}
.project-box div:last-child {
text-align: center;
margin-top: 20px;
}
/*---------------------------------------*/
/* -- ABOUT SECTION -- */
/*=======================================*/
.section-about {
background-color: #097054;
color: #e2e2e2;
}
#profile-pic {
display: block;
width: 200px;
height: auto;
margin: 40px auto;
border-radius: 50%;
}
.section-about p {
line-height: 145%;
letter-spacing: 1px;
margin-bottom: 20px;
}
#skills h3 {
display: inline-block;
margin-top: 50px;
float: left
}
#skills li {
display: inline-block;
float: left;
margin: 50px 0 0 40px;
}
.twitter-feed i {
font-size: 250%;
position: relative;
margin-left: 50%;
top: -63px;
}
.twitter-widget {
position: relative;
width: 60%;
margin-left: 20%;
top: -55px;
}
.twitter-widget li {
list-style: none;
clear: both;
}
.twitter-widget li .tweets_txt {
margin-bottom: 15px;
float: left;
font-size: 100%;
}
.twitter-widget li .tweets_txt span {
font-style: italic;
color: #ada7a7;
display: block;
}
/*---------------------------------------*/
/* -- CONTACT SECTION -- */
/*=======================================*/
.contact-social {
text-align: center;
font-size: 200%;
}
.section-contact p {
text-align: center;
line-height: 145%;
}
.contact-social li {
display: inline-block;
text-decoration: none;
padding: 5px;
}
.contact-social li.twitter a:hover,
.contact-social li.twitter a:active {
color: #55acee;
}
.contact-social li.linkedin a:hover,
.contact-social li.linkedin a:active {
color: #007bb5;
}
.contact-form {
width: 60%;
margin: 60px auto;
}
.contact-form input[type=number],
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
width: 100%;
padding: 4px;
border-radius: 5px;
border: 1px solid #dd8500;
}
.contact-form textarea {
height: 100px;
}
*:focus { outline-color: #097054;}
/*---------------------------------------*/
/* -- FOOTER SECTION -- */
/*=======================================*/
footer {
background-color: #3c3f43;
padding: 30px;
}
.footer-nav {
float: left;
font-size: 80%;
}
.footer-nav li {
display: inline-block;
list-style: none;
padding: 5px;
}
.social-links {
float: right;
font-size: 200%;
}
.social-links li {
display: inline-block;
list-style: none;
padding: 5px;
}
footer p {
text-align: center;
font-size: 80%;
}
/*---------------------------------------*/
/* -- ANIMATIONS -- */
/*=======================================*/
.js--wp-1,
.js--wp-2,
.js--wp-3,
.js--wp-4,
.js--wp-6 {
opacity: 0;
}
.js--wp-1.animated,
.js--wp-2.animated,
.js--wp-3.animated,
.js--wp-4.animated,
.js--wp-6.animated {
opacity: 1;
}
.js--wp-5 {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}/* Big tablet to 1200px (widths smaller then our 1140px row */
@media only screen and (max-width: 1200px) {
.row { padding: 0 2%; }
.heading-text-box {
width: 100%;
margin: 0 2%;
}
}
/* Small tablet to big tablet e.g ipad on landscape view: 768px to 1023px */
@media only screen and (max-width: 1023px) {
html,
body {
font-size: 18px;
}
.twitter-widget {
width: 70%;
margin: 0 10%;
}
.contact-form {
width: 70%;
}
}
/* Small phones to small tablets: 481px to 767px */
@media only screen and (max-width: 767px) {
html, body {
font-size: 16px;
}
.col {
width: 100%;
margin: 0 0 4% 0;
}
.contact-form {
width: 100%;
}
.twitter-widget {
top: 0;
}
.twitter-feed i {
top: 0;
}
.heading-text-box { margin: 0 4%; }
/* Use mobile navigation */
.main-nav { display: none; }
.main-nav.show-Nav { display: block; }
.mobile-nav-btn {
display: block;
margin-right: 10px;
margin-top: 40px;
}
.main-nav {
float:left;
margin-top: 40px;
}
.main-nav li {
display: block;
padding: 10px;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited { border: 0; }
.main-nav li a:hover,
.main-nav li a:active { border: 0; }
.contact-form { width: 80%; }
}
/* Small phones: 0 to 480px */
@media only screen and (max-width: 480px) {
.contact-form { width: 100%; }
section { padding: 50px 0;}
.logo { height: 50px; }
.sticky .logo { height: 30px;}
.mobile-nav-btn { margin-top: 25px; }
.sticky .mobile-nav-btn { margin-top: 2px; }
} 最佳答案
问题是“FRONT-END”中的连字符和应用于 .heading-text-box 的左边距。为了让人们的注意力从小屏幕上的连字符上移开，我会尝试这样的事情:
@media only screen and (max-width: 480px) {
.heading-text-box {
margin-left: 0;
}
h1 {
letter-spacing: normal;
}
}
这两个调整后看起来像这样:
关于html - 我的 iPhone 6 上的 Safari 忽略了 overflow-x : hidden，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37096223/
26
4
0
如果我使用 NSUserDefaults 存储应用程序的设置，是否有任何方法可以使我的应用程序的设置“隐藏”，以免显示在 iPhone 上的常规设置应用程序中？我知道还有其他工具，例如 mySetti
我按照该网站的教程进行操作: http://theappleblog.com/2008/08/04/tutorial-build-a-simple-rss-reader-for-iphone/ 为了制
我通过 localisableString 和仅适用于 NSLocale 方法的不同 xib 更改 iPhone 的语言来完成本地化，但应用程序的要求是通过更改应用程序设置 View 中的语言来本地化
我试图弄清楚 iPhone 是否可以通过无线或蓝牙连接到另一台非 iPhone 设备，但发现了相互冲突的信息。我发现的大部分内容都是在 SDK 3.0 版本发布之前发现的，当时这肯定是不可能的。查看堆
This question already has answers here: Closed 7 years ago. Possible Duplicate: How to detect iPhone
当我在模拟器上运行我的应用程序时，每次都会生成白色的空白屏幕。但是当我在底部黑色 iPhone 按钮退出应用程序后，重新进入应用程序后 View 将可见。然后应用程序照常运行。 但是当我将它加载到我的
我的意思是两台 iPhone 设备应该通过蓝牙或 WiFi 连接，并且一台设备的 UI 应该扩展到另一台 iPhone 设备(不共享屏幕)。我们有办法在 iOS 中执行此操作吗？ 最佳答案 Bump
如何通过宏检测设备型号？我使用过类似的东西，但模拟器上的结果总是 IS_IPHONE_5 #define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInt
我目前有一个应用程序要求用户维护 VPN 隧道。加载时我检查 VPN 隧道是否可用。 我想知道是否有任何方法可以显示 UIAlertView，单击“确定”后，用户将进入 iPhone 主设置屏幕，以便
我正在开发一个 iPhone 客户端应用程序，它允许用户对各种服务进行评分。无需注册或登录。 要求是用户不能重复对服务进行评分(尽管可以更改其评分)。从目前的情况来看，该应用程序可以被删除、重新安装，
比如说，我点击一个 iphone 应用程序图标，启动时它将创建一个 .app 文件。那么是否可以从该应用程序调用另一个 iphone 应用程序。或者我们可以在该 .app 文件中执行一些操作，例如它将
真的有可能让iPhone静音模式独立于iPhone App吗？ 这个应用程序"Talking Carl"让我很困惑。我的 iPhone 处于静音模式。每当我打开这个应用程序时。应用程序声音处于开启模式
这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用，visit the
如果我想编写一些自定义 iPhone 应用程序，但不一定通过 App Store 分发它们，是否可以在不加入 iPhone 开发者计划的情况下实现？ 假设我只是想为自己编写一些小实用程序并将其放入我的
人们对 Unity 或 Torque Engine 等游戏引擎有何看法和/或体验？如果您是 iPhone 游戏开发新手，是否值得学习其中一种引擎？这些引擎生成的应用程序与使用 sdk 的 native
您能否在未安装 XCode 开发工具的计算机上分发 iPhone 应用程序以在 iPhone 模拟器中进行测试？可以直接在电脑上安装模拟器进行测试吗？ 我有一组测试人员，他们不是开发人员，除了能够运行
我想在我的越狱设备上构建并安装我的应用程序，而无需支付 iPhone 开发者计划所需的 99 美元。我有 Rock 和 Cydia...最简单的方法是什么(如果可能的话)？ 谢谢。 最佳答案 这是一个
我想测试一个网站，看看它如何与 iPhone 配合使用，但我没有 iPhone 或 iPod touch。有没有一种方法可以让我在不拥有网站的情况下测试网站的运行情况？ 我真正想要的是修复 Stack
简单地说；我的 99 美元能给我带来什么我无法免费获得的东西？ 好吧，好吧，听起来是个愚蠢的问题，但苹果网站对我来说并不清楚。 我的预感是，您可以在 99 岁时向应用程序商店提交应用程序，但您可以免费
我是一名注册的 iOS 开发人员。如何将我的 iPhone 应用程序转移到我的个人 iPhone？ 最佳答案 用于测试？只需选择您的设备而不是模拟器即可。 关于iphone - 如何将我的 iPhon
我是一名优秀的程序员,十分优秀！